怎么使用Vue實(shí)現(xiàn)base64編碼圖片間的切換功能
小編給大家分享一下怎么使用Vue實(shí)現(xiàn)base64編碼圖片間的切換功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、都蘭網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為都蘭等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
要實(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ò)去
引入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中寫(xiě)文件路徑?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文件中寫(xiě)文件的路徑，渲染結(jié)果(無(wú)法識(shí)別文件路徑):
解決方案：使用模板字符串，json文件只寫(xiě)文件名，文件路徑寫(xiě)在當(dāng)前組件
require的正確使用方式
require(`../assets/img/emoji/${hoverPath}`);看完了這篇文章，相信你對(duì)“怎么使用Vue實(shí)現(xiàn)base64編碼圖片間的切換功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當(dāng)前題目：怎么使用Vue實(shí)現(xiàn)base64編碼圖片間的切換功能
網(wǎng)頁(yè)鏈接：
http://weahome.cn/article/ijeids.html
重慶分公司
重慶分公司
