怎么使用Vue實現(xiàn)base64編碼圖片間的切換功能

小編給大家分享一下怎么使用Vue實現(xiàn)base64編碼圖片間的切換功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

要實現(xiàn)的效果

實現(xiàn)思路

• 給每個元素添加@mouserover事件和@mouseleave事件

• 綁定函數(shù)，傳用于識別當(dāng)前參數(shù)的標(biāo)識

• 根據(jù)所傳參數(shù)判斷當(dāng)前狀態(tài)下應(yīng)該顯示什么圖片

解析渲染

實現(xiàn)過程

從json文件中讀取圖片信息集合，循環(huán)渲染json文件中的圖片，傳當(dāng)前元素和當(dāng)前圖片的一些信息過去

<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,item.hover)">
  </div>
</div>

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

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

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

實現(xiàn)鼠標(biāo)移入移除替換圖片的函數(shù)

 // 表情框鼠標(biāo)懸浮顯示動態(tài)表情
  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": "1fix@2x.png",
  "info": "撇嘴",
  "hover": "1@2x.gif"
 },
 {
  "name": "porn",
  "src": "2fix@2x.png",
  "info": "色",
  "hover": "2@2x.gif"
 },
 {
  "name": "smile",
  "src": "14fix@2x.png",
  "info": "微笑",
  "hover": "14@2x.gif"
 },
 {
  "name": "smile",
  "src": "178fix@2x.png",
  "info": "滑稽",
  "hover": "178@2x.gif"
 }
]

踩坑過程

錯誤的使用require

// 這樣直接在data中寫文件路徑?jīng)]問題，可以正常渲染
emojiSrc:{
    "funny":require("../assets/img/emoji/178fix@2x.png"),
    "funnyNormal":require("../assets/img/emoji/178fix@2x.png"),
    "funnyHover":require("../assets/img/emoji/178@2x.gif"),
    "smile":require("../assets/img/emoji/14fix@2x.png"),
    "smileNormal":require("../assets/img/emoji/14fix@2x.png"),
    "smileHover":require("../assets/img/emoji/14@2x.gif"),
    "pout":require("../assets/img/emoji/1fix@2x.png"),
    "poutNormal":require("../assets/img/emoji/1fix@2x.png"),
    "poutHover":require("../assets/img/emoji/1@2x.gif"),
    "porn":require("../assets/img/emoji/2fix@2x.png"),
    "pornNormal":require("../assets/img/emoji/2fix@2x.png"),
    "pornHover":require("../assets/img/emoji/2@2x.gif"),
  }

渲染結(jié)果:

但是如果在json文件中寫文件的路徑，渲染結(jié)果(無法識別文件路徑):

解決方案：使用模板字符串，json文件只寫文件名，文件路徑寫在當(dāng)前組件

require的正確使用方式

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

看完了這篇文章，相信你對“怎么使用Vue實現(xiàn)base64編碼圖片間的切換功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！