首先看最终效果图:
1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css
index.vue内的template部份代码如下:(最新更正:代码里所有a标签部份应该用router-link)
<template> <div> <!-- 侧导航左栏 --> <div class="tabNav"> <div style="border: 1px solid rgba(235,236,240,1);margin-left:16px;margin-top: 20px;"> <div v-for="(item,index) in tabList" :key="index" @mouseenter="tabChange(item.children,index)" @mouseleave="tabHide()":class="{active:index==isActive}"> <div class="tabLeft" > <div class="tabTitle" style="margin-bottom:9px"> <!-- <a class="tabhref" :href="item.url">{{item.name}}</a> --> <router-link class="tabhref" :to="item.url">{{item.name}}</router-link> </div> <div class="tabContent" v-for="item1 in item.children" style="float:left;margin-left:15px"> <!-- <a class="tabLabel" :href="item1.url">{{item1.name}}</a> --> <router-link class="tabLabel" :to="item1.url">{{item1.name}}</router-link> </div> </div> </div> </div> </div> <!-- 侧导航内容 --> <div class="tabs-content" v-if="tabcontentShow" @mouseenter="tabShow()" @mouseleave="tabHide()"> <div class="tabDetail" v-for="item in this.tabcontent"> <h4 class="tabLabel"><router-link class="tabhref" :to="item.url">{{item.name}}</router-link></h4> <div style="display:flex;flex-wrap: wrap;justify-content:space-around;padding-top:8px;"> <div class="tabLabelSon" v-for="item1 in item.children"> <!-- <a class="tabhref tabLabelSon" :href="item1.url">{{item1.name}}</a> --> <router-link class="tabLabel" :to="item1.url">{{item1.name}}</router-link> </div> </div> </div> </div> </div> </template> <script> import axios from '../../plugins/axios.js'; export default { name:'Tabs', data() { return { tabList:[ // {tabtitle:"店铺管理",tabhref:'www.baidu.com',tablabel:[ // {tablabName:'管理公司信息',tablabHerf:'www.baidu1.com'}, // {tablabName:'V认证',tablabHerf:'www.baidu2.com'}, // {tablabName:'test3',tablabHerf:'www.baidu3.com'} // ], // tabcontent:[ // {title:'管理公司信息',href:'www.baidu.com',detail:[ // {detaillab:'管理公司信息',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu2.com'}]}, // {title:'A&V认证',href:'www.baidu.com',detail:[ // {detaillab:'V认证',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'新南方',href:'www.baidu.com',detail:[ // {detaillab:'80请问3',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'新杯方',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, // {tabtitle:"产品管理",tabhref:'www.baidu1.com',tablabel:[ // {tablabName:'发布产品',tablabHerf:'www.baidu.com'}, // {tablabName:'管理产品',tablabHerf:'www.baidu.com'}, // {tablabName:'回收站',tablabHerf:'www.baidu.com'}, // ], // tabcontent:[ // {title:'发布产品',href:'www.baidu.com',detail:[ // {detaillab:'发布产品',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu1.com'},]}, // {title:'管理产品',href:'www.baidu.com',detail:[ // {detaillab:'管理产品',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'回收站',href:'www.baidu.com',detail:[ // {detaillab:'回收站',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'创造性',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, // {tabtitle:"案例管理",tabhref:'www.baidu2.com',tablabel:[ // {tablabName:'发布案例',tablabHerf:'www.baidu.com'}, // {tablabName:'管理案例',tablabHerf:'www.baidu.com'}, // {tablabName:'回收站',tablabHerf:'www.baidu.com'}, // ], // tabcontent:[ // {title:'发布案例',href:'www.baidu.com',detail:[ // {detaillab:'发布案例',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu1.com'},]}, // {title:'管理案例',href:'www.baidu.com',detail:[ // {detaillab:'管理案例',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'回收站',href:'www.baidu.com',detail:[ // {detaillab:'回收站',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'就如同',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, // {tabtitle:"商机&客户中心",tabhref:'www.baidu3.com',tablabel:[ // {tablabName:'询盘',tablabHerf:'www.baidu.com'}, // {tablabName:'设置',tablabHerf:'www.baidu.com'}, // {tablabName:'test12',tablabHerf:'www.baidu.com'}, // ], // tabcontent:[ // {title:'询盘',href:'www.baidu.com',detail:[ // {detaillab:'询盘',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu1.com'},]}, // {title:'设置',href:'www.baidu.com',detail:[ // {detaillab:'设置',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'就好地方',href:'www.baidu.com',detail:[ // {detaillab:'80请问3',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'新杯就如同j方',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, // {tabtitle:"商家成长",tabhref:'www.baidu4.com',tablabel:[ // {tablabName:'商学院',tablabHerf:'www.baidu.com'}, // {tablabName:'test14',tablabHerf:'www.baidu.com'}, // {tablabName:'test15',tablabHerf:'www.baidu.com'}, // ], // tabcontent:[ // {title:'商学院',href:'www.baidu.com',detail:[ // {detaillab:'803',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu1.com'},]}, // {title:'新西广泛大概方',href:'www.baidu.com',detail:[ // {detaillab:'80321',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'新南白大夫本人方',href:'www.baidu.com',detail:[ // {detaillab:'80请问3',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'广泛的',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, // {tabtitle:"交易管理",tabhref:'www.baidu5.com',tablabel:[ // {tablabName:'test16',tablabHerf:'www.baidu.com'}, // {tablabName:'test17',tablabHerf:'www.baidu.com'}, // {tablabName:'test18',tablabHerf:'www.baidu.com'}, // ], // tabcontent:[ // {title:'范文芳',href:'www.baidu.com',detail:[ // {detaillab:'803',detailhref:'www.baidu1.com'}, // {detaillab:'806',detailhref:'www.baidu1.com'},]}, // {title:'发生的',href:'www.baidu.com',detail:[ // {detaillab:'80321',detailhref:'www.baidu1.com'}, // {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]}, // {title:'新南五分方',href:'www.baidu.com',detail:[ // {detaillab:'80请问3',detailhref:'www.baidu1.com'}, // {detaillab:'803216',detailhref:'www.baidu1.com'},]}, // {title:'VS发生的的',href:'www.baidu.com',detail:[ // {detaillab:'80321委屈3',detailhref:'www.baidu1.com'}, // {detaillab:'80问问6',detailhref:'www.baidu1.com'},]}, // ] // }, ], tabcontentShow:false, tabcontent:'', isActive:false, }; }, methods:{ // 鼠标移入加入class tabShow() { this.tabcontentShow = true; }, tabHide() { this.tabcontentShow = false; }, tabChange(content,index) { this.tabcontentShow = true; this.tabcontent = content; this.isActive = index; }, getList(){ axios('user/v1/menuTree','GET').then( res => { this.tabList = res.data.data; console.log(this.tabList); }), err => { console.log(err) } }, }, created() { this.getList(); } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped > @import './index.css'; </style>
3.index.vue内的style部份代码如下:
@import './index.css'; //引入外联的index.css
4.
index.css部份代码:
.tabNav { width: 210px; position: fixed; top: 0; bottom: 0; margin-top: 64px; background:rgba(247,248,250,1); overflow: hidden; z-index: 99; } .tabs-content { position: fixed; top: 20px; left:210px; bottom: 0; margin-top: 64px; width:324px; height:360px; padding:0 24px; float: left; z-index: 99; background:rgba(247,248,250,1); border:1px solid rgba(196,198,207,1); } .tabLeft{ min-width:180px; height:67px; background: #fff; } .tabLeft:hover { background:rgba(247,248,250,1); border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .tabTitle { text-align: left; padding-left: 16px; padding-top: 12px; font-size:14px; font-family:PingFang-SC-Medium; font-weight:500; cursor: pointer; color:rgba(51,51,51,1); } .tabhref { color:rgba(51,51,51,1); } .tabhref:hover { color: red; transition: all 0.5s; } .tabLabel { width:50%; font-size:12px; font-family:PingFang-SC-Medium; font-weight:500; cursor: pointer; text-align: left; color:rgba(153,153,153,1); } .tabLabel:hover { color: red; transition: all 0.5s; } .tabLabelSon { font-size:12px; font-family:PingFang-SC-Medium; font-weight:500; text-align: left; color:rgba(102,102,102,1); } .tabDetail { padding-top: 24px; } .active { border-left: solid rgba(27,191,196,1); }
5.index.js部份代码如下:
import tabs from './index.vue'; import Vue from 'vue' const Tabs = { install:function() { Vue.component('Tabs',tabs) } } export default Tabs;
6.再main.js里完成全局注册
import Tabs from './components/tab/index'
Vue.use(Tabs);
最后,在App.vue文件里引用
<Tabs/>
至此,侧导航栏就会出现在所有的页面,初次封装,有什么问题的话希望提出指正!