我用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;
}
}