这篇文章主要介绍了Vue实现base64编码图片间的切换功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

前言

昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就有了本篇文章的分享。先给大家展示下最后要实现的效果

实现思路

    给每个元素添加@mouserover事件和@mouseleave事件 绑定函数,传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片

解析渲染

实现过程

从json文件中读取图片信息集合,循环渲染json文件中的图片,传当前元素和当前图片的一些信息过去

<div>
  <div v-for="item in this.emojiList" :key="item.info">
    <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info" @mouseover="emojiConversion($event,'over',item.src,item.hover)" @mouseleave="emojiConversion($event,'leave',item.src,item.hover)">
  </div>
</div>

引入json文件,并在data()中声明

import emoji from '../assets/json/emoji';

data() {
      return {
        emojiList:emoji,
        toolbarList:toolbar
      }
    }

实现鼠标移入移除替换图片的函数

 // 表情框鼠标悬浮显示动态表情
  emojiConversion:function (event,status,path,hoverPath) {
    if(status==="over"){
      event.target.src = require(`../assets/img/emoji/${hoverPath}`);
    }else{
      event.target.src = require(`../assets/img/emoji/${path}`);
    }
  }

emoji.json
[
 {
  "name": "pout",
  "src": "[email protected]",
  "info": "撇嘴",
  "hover": "[email protected]"
 },
 {
  "name": "porn",
  "src": "[email protected]",
  "info": "色",
  "hover": "[email protected]"
 },
 {
  "name": "smile",
  "src": "[email protected]",
  "info": "微笑",
  "hover": "[email protected]"
 },
 {
  "name": "smile",
  "src": "[email protected]",
  "info": "滑稽",
  "hover": "[email protected]"
 }
]

踩坑过程

错误的使用require

// 这样直接在data中写文件路径没问题,可以正常渲染
emojiSrc:{
    "funny":require("../assets/img/emoji/[email protected]"),
    "funnyNormal":require("../assets/img/emoji/[email protected]"),
    "funnyHover":require("../assets/img/emoji/[email protected]"),
    "smile":require("../assets/img/emoji/[email protected]"),
    "smileNormal":require("../assets/img/emoji/[email protected]"),
    "smileHover":require("../assets/img/emoji/[email protected]"),
    "pout":require("../assets/img/emoji/[email protected]"),
    "poutNormal":require("../assets/img/emoji/[email protected]"),
    "poutHover":require("../assets/img/emoji/[email protected]"),
    "porn":require("../assets/img/emoji/[email protected]"),
    "pornNormal":require("../assets/img/emoji/[email protected]"),
    "pornHover":require("../assets/img/emoji/[email protected]"),
  }

渲染结果:

但是如果在json文件中写文件的路径,渲染结果(无法识别文件路径):

解决方案:使用模板字符串,json文件只写文件名,文件路径写在当前组件

require的正确使用方式

require(`../assets/img/emoji/${hoverPath}`);

总结

以上所述是小编给大家介绍的Vue实现base64编码图片间的切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
特斯拉:将自主研发新电池 预计4月正式宣布

特斯拉:将自主研发新电

特斯拉相关人士表示,特斯拉将自主研发新电池,预计会在4
苹果春季发布会或3月底举办:预计发布多款硬件新品

苹果春季发布会或3月

来自iPhone-ticker.de网站的消息称,苹果计划在今年3月3
微博将于2月26日发布2019年第四季度及全年财报

微博将于2月26日发布2

微博公司 定于美国东部时间2020年2月26日美国股市开盘
捐赠100万元后 得物App将1万件隔离衣等物资送往湖北

捐赠100万元后 得物Ap

得物App(原毒App)捐赠的第二批医疗物资近日发往武汉,包括
苹果美股盘前跌超4% 3月季度营收目标将无法实现

苹果美股盘前跌超4% 3

苹果美股盘前跌超4%。此前苹果对外宣布,受疫情影响,全球
棋(ma)牌(jiang)、换装类游戏春节增长最快,字节跳动成搅局者

棋(ma)牌(jiang)、换装类游戏春节

2020年春节期间下载量TOP10游戏中有3款来自字节跳动。
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大
炸金花 传奇私服 江西快3 炸金花