1、需求导入
在某个需求下，需要鼠标移入时是A背景图，移出时是B背景图。（针对于Vue项目），如果是普通的HTML页面可直接在js中获取dom元素去修改style等方式实现，在Vue中，需要先将图片导入，将图片声明为一个变量。
2、具体实现过程
实现前.png
如截图所示，我们要改变的是红圈标记的两个图片，当鼠标移入部分时，将那块的image替换为UI给的图片。
2.1、先导入图片，声明为一个变量
这里也可以用require去获取
let edit = require("@/assets/editor.png")
也可以使用import导入再去data中去赋值给变量
import edit from "@/assets/editor.png";
import del from "@/assets/delete.png";
import activeEdit from "@/assets/editor_blue.png";
import activeDel from "@/assets/delete_red.png";
下面就是赋值给到变量中去
data() {
return {
editUrl: edit, // 编辑时的图片变量
delUrl: del, // 删除时的图片变量
};
},
3、开始添加事件进行处理
<div class="card-box">
<div
class="index-icon-edit"
@mouseover="mouseEdit" // 移入编辑时的事件
@mouseleave="leaveEdit" // 移出编辑时的事件
>
<img :src="editUrl" @click.stop="editor(v)" alt="" />
</div>
<div
class="index-icon-del"
@mouseover="mouseDel" // 移入删除时的事件
@mouseleave="leaveDel" // 移出删除时的事件
>
<img :src="delUrl" @click.stop="romve(v)" alt="" />
</div>
</div>
3.1、事件处理
//移入编辑
mouseEdit() {
this.editUrl = activeEdit; // 替换为编辑激活图片
this.delUrl = del;
},
leaveEdit() {
this.editUrl = edit;
},
//移入删除
mouseDel() {
this.editUrl = edit;
this.delUrl = activeDel; // 替换为删除激活的图片
},
leaveDel() {
this.delUrl = del;
},
4、效果展示
动态修改背景图.gif
