Vue如何实现鼠标悬浮切换图片

发布时间:2022-03-28 09:05:58 作者:iii
来源:亿速云 阅读:972

这篇“Vue如何实现鼠标悬浮切换图片”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何实现鼠标悬浮切换图片”文章吧。

需求:

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

Vue如何实现鼠标悬浮切换图片

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

以上就是关于“Vue如何实现鼠标悬浮切换图片”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. jQuery如何实现鼠标滑动切换图片
  2. Vue.js如何实现鼠标悬浮更换图片功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:Vue中怎么使用js制作进度条式数据对比动画

下一篇:Vue中怎么使用echarts定制特殊的仪表盘

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》