Vue实现base64编码图片间的切换

不断学习，不断创新，用代码创造属于自己的世界。💡

前言

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

实现思路

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

实现过程

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

  <div class="row-panel">
      <div class="item-panel" 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,ite