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)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單單獨(dú)移除一個字段驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了如何給element添加一個抽屜組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue項目配置eslint保存自動格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
利用Vue v-model實現(xiàn)一個自定義的表單組件
本篇文章主要介紹了利用Vue v-model實現(xiàn)一個自定義的表單組件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Vee-validate 父組件獲取子組件表單校驗結(jié)果的實例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內(nèi)容并顯示對應(yīng)的錯誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗結(jié)果 ,需要的朋友可以參考下2019-05-05
el-menu如何根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄
這篇文章主要介紹了el-menu根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了淺談Vue.set實際上是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文通過實例代碼給大家介紹了vue 2.x 中axios 封裝的get 和post方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11