首先看最终效果图：
1.compent文件夹里添加tab文件夹，里面创建index.vue index.js index.css
index.vue内的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.
}}</a>
</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>
</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"><a class="tabhref" :href="item.url">{{item.name}}</a></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>
</div>
</div>
</div>
</div>
</div>
2.index.vue内的script部份代码如下，试demo的时候可以用假数据看效果：
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();
}
};
3.index.vue内的style部份代码如下：
.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里完成全局注册
如对本文有疑问， 点击进行留言回复！！
网友评论