效果:
<div class="roleLeft">
<div class="head-tit ellipsis">角色类型</div>
<ul>
<li
v-for="(item,index) in roleList"
:key="index"
@click="clickNav(index)"
class="navSty"
:class="{cur:index==current}">
{{item.name}}
</li>
</ul>
</div>
菜单 默认选中第一个;
data(){
return {
current:0,
roleList:[
{
id:1,
name:"超级管理员"
},{
id:2,
name:"管理端管理员"
},{
id:3,
name:"管理端普通用户"
},{
id:4,
name:"生产端用户"
},{
id:5,
name:"传播端用户"
},
],
}
},
methods:{
clickNav(index){
this.current = index;
},
},
css:
.roleLeft{
padding:0 10px 0 20px;
min-width: 200px;
max-width: 200px;
flex: 0 0 200px;
font-size:14px;
border-right:1px solid #ccc;
background: rgb(255, 255, 255);
.head-tit{
font-weight:bold;
font-size:16px;
line-height:55px;
border-bottom: 1px solid #e8eaec;
color: #17233d;
width:100%;
}
.navSty{
margin-top:3px;
height:35px;
line-height:35px;
background:#fff;
margin-right:10px;
color:#222;
padding:0 10px;
cursor:pointer;
&.cur{
color:#2d8cf0;
font-weight: bold;
background-color: fade(@cur-color,5%);
}
}
}