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 + ")";
	}
}

 

Logo

前往低代码交流专区

更多推荐