[随笔] Vue中鼠标移入/移出事件——修改图片图标颜色(修改src地址)

效果：默认状态下图标为蓝色的；鼠标移入后图标变为白色的。
资源需要：此方法需要 2款 不同状态对应的图标文件，可以考虑使用svg图片、阿里字体图标。

---

Html 部分：

<!-- 如果此处的两个鼠标事件不生效，可以在 mouseenter和 mouseleave后面添加.native后缀 -->
<router-link to="./detail1" class="standard-itemBox" @mouseenter.native="changeImageSrc(1, 'hover')" @mouseleave.native="changeImageSrc(1, '')">
	<img :src="staImg1">
	<span>项目1</span>
</router-link>
<router-link to="./detail2" class="standard-itemBox" @mouseenter.native="changeImageSrc(2, 'hover')" @mouseleave.native="changeImageSrc(2, '')">
	<img :src="staImg2">
	<span>项目2</span>
</router-link>
<!-- 可以继续添加项 -->

Js 部分：

changeImageSrc (key, way) {
      // console.log('鼠标移入/移出')
      // 移入或移出时图标src 名后缀变化('_h'表示移入状态;默认状态后缀为空'')
      let tempStr = way === 'hover' ? '_h' : ''
      switch (key) {
        case 1:
          this.staImg1 = require(`@/../static/img/logo_home_standard1${tempStr}.png`)
          break
        case 2:
          this.staImg2 = require(`@/../static/img/logo_home_standard2${tempStr}.png`)
          break
        //可以继续添加
      }
},

---

方法参考: CSDN - 在下_大猫