这篇文章主要介绍了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编码图片间的切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
VC/PE圈降薪第一枪!淡马锡宣布:全员冻薪1年

VC/PE圈降薪第一枪!淡

高管带头,号召全员自愿降薪。
马斯克设想在零重力下表演星际协奏曲

马斯克设想在零重力下

也许未来的伟大协奏曲根本不会写在地球上。
推出云购物、导购变主播,这些商场的线上商城火了

推出云购物、导购变主

线下销售萎靡,线上“云购物”的新模式正在这些商场走红
加州车辆管理局2019年自动驾驶报告:百度实力强劲

加州车辆管理局2019年

加州机动车辆管理局(California Department of Motor V
蛋壳公寓惊险闯关40天:谁在说谎 谁在妥协?

蛋壳公寓惊险闯关40天

在持续近一月的紧张时刻里,房东、租客、蛋壳公寓三方针
神舟宣布将自己开发神舟商城 现在开始招聘

神舟宣布将自己开发神

神舟电脑 官方微博宣布,将开发自己的神舟商城,为大家提
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

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

Vue实现点击当前元素

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

Vue实现验证码功能

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

JS实现的雪花飘落特效

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

微信小程序实现图片压

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

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大