共计 882 个字符,预计需要花费 3 分钟才能阅读完成。
导读 | 这篇文章主要为大家详细介绍了 Vue 实现鼠标悬浮切换图片 src,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 |
本文实例为大家分享了 Vue 实现鼠标悬浮切换图片 src 的具体代码,供大家参考,具体内容如下
需求:
1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮
2. 鼠标离开图示按钮,图片切换成回白色按钮
Html 部分:
保存模板
删除选中行
清空当前表格
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
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助。
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)