Vue實(shí)現(xiàn)base64編碼圖片間的切換功能

更新時(shí)間：2019年12月04日 09:03:40 作者：神奇的程序員

這篇文章主要介紹了Vue實(shí)現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

昨天在項(xiàng)目開發(fā)中遇到了一個(gè)需要展示多張圖片到一個(gè)容器中的需求，每張圖片在鼠標(biāo)移入時(shí)都要更換圖片路徑，展示一個(gè)新的圖片，由于每張圖片大小都在2~6kb之間，webpack中配置了圖片在10kb以內(nèi)自動(dòng)轉(zhuǎn)換base64，所有就有了本篇文章的分享。先給大家展示下最后要實(shí)現(xiàn)的效果

實(shí)現(xiàn)思路

給每個(gè)元素添加@mouserover事件和@mouseleave事件
綁定函數(shù)，傳用于識(shí)別當(dāng)前參數(shù)的標(biāo)識(shí)
根據(jù)所傳參數(shù)判斷當(dāng)前狀態(tài)下應(yīng)該顯示什么圖片

解析渲染

實(shí)現(xiàn)過(guò)程

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

<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
      }
    }

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

 // 表情框鼠標(biāo)懸浮顯示動(dòng)態(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"
 }
]

踩坑過(guò)程

錯(cuò)誤的使用require

// 這樣直接在data中寫文件路徑?jīng)]問(wèn)題，可以正常渲染
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é)果(無(wú)法識(shí)別文件路徑):

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

require的正確使用方式

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

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)base64編碼圖片間的切換功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: