tab切换做hover效果和点击效果

时间：2021-04-24 11:49:44 阅读：0 评论：0 收藏：0 [点我收藏+]

我用el-tab做完后，发现默认有个高亮的效果，但是hover触发后，另外一个也会高亮，同时两个高亮，然后修改

技术图片

<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>

鼠标移入效果

技术图片

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;

}

原文地址：https://www.cnblogs.com/guohanting/p/14693048.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行