1、需求導(dǎo)入

在某個需求下，需要鼠標(biāo)移入時是A背景圖，移出時是B背景圖。（針對于Vue項目），如果是普通的HTML頁面可直接在js中獲取dom元素去修改style等方式實現(xiàn)，在Vue中，需要先將圖片導(dǎo)入，將圖片聲明為一個變量。

2、具體實現(xiàn)過程

實現(xiàn)前.png

如截圖所示，我們要改變的是紅圈標(biāo)記的兩個圖片，當(dāng)鼠標(biāo)移入部分時，將那塊的image替換為UI給的圖片。

2.1、先導(dǎo)入圖片，聲明為一個變量

這里也可以用require去獲取

let edit = require("@/assets/editor.png")

也可以使用import導(dǎo)入再去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、開始添加事件進(jìn)行處理

      <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、效果展示

動態(tài)修改背景圖.gif