我用el-tab做完后，发现默认有个高亮的效果，但是hover触发后，另外一个也会高亮，同时两个高亮，然后修改
<div class="tabs">
<span :class="i.value==activeName?'tabHover':''"
@mouseenter="onMouseenter(i.value)"
@click="handleClick(i.value)" v-for="(i,key) in tabData" :key="key">{{i.label}}</span>
</div>
定义数据
tabData:[
{label:"国家政策",value:"first"},
{label:"地方政策",value:"second"},
]
鼠标移入效果
onMouseenter(value){
this.activeName=value
if(value=="first"){
this.newData=this.countryData
}else{
this.newData=this.localData
}
},
鼠标点击效果
handleClick(name){
this.activeName=name
console.log("name",name)
if(name=="first"){
let counLink=this.$router.resolve({path:"/hotpolicy", query: {name: "国家"}})
window.open(counLink.href,"_blank")
}else if(name=="second"){
let landLink=this.$router.resolve({path:"/hotpolicy", query: {name: "地方"}})
window.open(landLink.href,"_blank")
}
},
样式
.tabs{
span{
margin-right: 10px;
cursor: pointer;
}
.tabHover{
color: #0080ff;
}
}