乘风原创程序

  • 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
    ? }
    }