不斷學(xué)習(xí)，不斷創(chuàng)新涮因，用代碼創(chuàng)造屬于自己的世界。??
前言
昨天在項目開發(fā)中遇到了一個需要展示多張圖片到一個容器中的需求伺绽，每張圖片在鼠標(biāo)移入時都要更換圖片路徑养泡，展示一個新的圖片，由于每張圖片大小都在2~6kb之間奈应，webpack中配置了圖片在10kb以內(nèi)自動轉(zhuǎn)換base64澜掩，所有就有了本篇文章的分享。先給大家展示下最后要實現(xiàn)的效果
image
實現(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" } ]
踩坑過程
- 錯誤的使用<font color='red'>require</font>
// 這樣直接在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é)果:
image
但是如果在json文件中寫文件的路徑点把，渲染結(jié)果(無法識別文件路徑):
image
解決方案：使用模板字符串，json文件只寫文件名屿附，文件路徑寫在當(dāng)前組件
- <font color='green'>require</font>的正確使用方式
require(`../assets/img/emoji/${hoverPath}`);
寫在最后
- 文中如有錯誤郎逃，歡迎在評論區(qū)指正，如果這篇文章幫到了你挺份，歡迎點贊和關(guān)注??
- 本文首發(fā)于掘金褒翰，如需轉(zhuǎn)載請注明出處??
