乘风原创程序

  • Vue实现鼠标悬浮切换图片src
  • 2022/3/27 14:28:04

  • 本文实例为大家分享了vue实现鼠标悬浮切换图片src的具体代码，供大家参考，具体内容如下

    需求：

    1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮
    2. 鼠标离开图示按钮，图片切换成回白色按钮

    html部分：

    <!-- 如果此处的两个鼠标事件不生效，可以在mouseenter后面添加.native后缀 -->
<div class="left-btn"
? ? ?@click="savetemplate()"
? ? ?@mouseenter="changeimagesrc(1, 'hover')"
? ? ?@mouseleave="changeimagesrc(1, '')">
? <img :src="savetemplatesrc"
? ? ? ?class="left-btn-img"
? ? ? ?alt="">
? <span class="left-btn-text">保存模板</span>
</div>
<div class="left-btn"
? ? ?@click="deleteselectstock()"
? ? ?@mouseenter="changeimagesrc(2, 'hover')"
? ? ?@mouseleave="changeimagesrc(2, '')">
? <img :src="deleteselectstocksrc"
? ? ? ?class="left-btn-img"
? ? ? ?alt="">
? <span class="left-btn-text">删除选中行</span>
</div>
<div class="left-btn"
? ? ?@click="deletetabledata()"
? ? ?@mouseenter="changeimagesrc(3, 'hover')"
? ? ?@mouseleave="changeimagesrc(3, '')">
? <img :src="deletetabledatasrc"
? ? ? ?class="left-btn-img"
? ? ? ?alt="">
? <span class="left-btn-text">清空当前表格</span>
</div>

    js部分：

    // 在data中先定义图片的初始src
savetemplatesrc: require("@/assets/databrowser/savetemplate.png"),
deleteselectstocksrc: require("@/assets/databrowser/deleteselectedrow.png"),
deletetabledatasrc: require("@/assets/databrowser/clearcurrentlist.png")
?
// 在methods中绑定鼠标悬浮事件
changeimagesrc (key, way) {
? let tempstr = way === 'hover' ? 'hover' : ''
? switch (key) {
? ? case 1:
? ? ? this.savetemplatesrc = require(`@/assets/databrowser/savetemplate${tempstr}.png`)
? ? ? break
? ? case 2:
? ? ? this.deleteselectstocksrc = require(`@/assets/databrowser/deleteselectedrow${tempstr}.png`)
? ? ? break
? ? case 3:
? ? ? this.deletetabledatasrc = require(`@/assets/databrowser/clearcurrentlist${tempstr}.png`)
? ? ? break
? }
}