欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年12月04日 09:03:40   作者：神奇的程序員  
這篇文章主要介紹了Vue實現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

前言

昨天在項目開發(fā)中遇到了一個需要展示多張圖片到一個容器中的需求，每張圖片在鼠標(biāo)移入時都要更換圖片路徑，展示一個新的圖片，由于每張圖片大小都在2~6kb之間，webpack中配置了圖片在10kb以內(nèi)自動轉(zhuǎ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}`);

總結(jié)

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

相關(guān)文章

最新評論