vue项目鼠标移入移出切换背景图片闪烁问题的解决
1. vue动态切换背景图:<el-tooltip class="item" effect="dark":content="'切换凭证'" placement="top-end"><div class="btn" @mouseenter="mouseenter" @mouseleave="mouseleave":style="{'background':'url('+iconIm
·
1. vue动态切换背景图:
<el-tooltip class="item" effect="dark" :content="'切换凭证'" placement="top-end">
<div class="btn" @mouseenter="mouseenter" @mouseleave="mouseleave"
:style="{'background':'url('+iconImg+') no-repeat','background-size':'100% 100%'}" @click.stop.prevent="openVoucherList" >
</div>
</el-tooltip>
mouseenter(e){
this.newImageHandle(e,'hover')
},
mouseleave(e){
this.newImageHandle(e,'detault')
},
newImageHandle(e,type='hover'){
let img = new Image();
img.src = type==='hover'?this.iconImgHover:this.iconImgDefault
img.onload = function () {
e.target.style.backgroundImage = "url(" + img.src + ")";
}
}
更多推荐
已为社区贡献21条内容
所有评论(0)