Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
更新時(shí)間：2022年10月20日 10:05:07 作者：今天代碼敲了嗎
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vant 使用 ImagePreview 預(yù)覽圖片
場(chǎng)景1
編列數(shù)組生成圖片，點(diǎn)擊預(yù)覽圖片
<div class="zoom"
v-for="(item, index) in listData"
v-show="item"
:key="index"
>
<img
v-if="item"
class="img"
:src="item"
alt="預(yù)覽圖片"
@click="getImg(listData, index)"
/>
</div>
<script>
import { ImagePreview } from "vant";
export default {
name: "ImagePreview ",
data() {
return {
listData: ["1.jpg","2.jpg"],//圖片數(shù)組
};
},
methods: {
getImg(images, index) {
ImagePreview({
images: this.listData,
showIndex: true,
loop: false,
startPosition: index
});
}
},
computed: { },
created() {}
};
</script>
場(chǎng)景2
一個(gè)用字符串，用，分割為數(shù)組，編列數(shù)組生成圖片，點(diǎn)擊預(yù)覽圖片
<div class="zoom"
v-for="(item, index) in imgstr && imgstr.split(',')"
v-show="item"
:key="index"
>
<img
v-if="item"
class="img"
:src="item"
alt="預(yù)覽圖片"
@click="getImg(imgstr , index)"
/>
</div>
<script>
import { ImagePreview } from "vant";
export default {
name: "ImagePreview ",
data() {
return {
imgstr :"1.jpg,2.jpg"
imglist: []
};
},
methods: {
this.imglist = [];
const imgurls = imgstr.split(",");
for (let index = 0; index < imgurls.length; index++) {
this.imglist.push(this.viewImgs(imgurls[index]));
}
ImagePreview({
images: this.imglist,
showIndex: true,
loop: false,
startPosition: index
});
},
computed: { },
created() {}
};
</script>
效果圖
圖片預(yù)覽正確的打開(kāi)方式 vue-vant中ImagePreview
在使用vue的過(guò)程中，vant在移動(dòng)端的地位還是很高的，本文簡(jiǎn)單介紹一下如何在自己項(xiàng)目中實(shí)現(xiàn)ImagePreview圖片預(yù)覽效果，獲取圖片索引,點(diǎn)擊哪一張就預(yù)覽哪一張
效果圖如下
實(shí)現(xiàn)步驟，分為3步
1、局部注冊(cè)ImagePreview
import { ImagePreview } from "vant";2、創(chuàng)建處理函數(shù)open，執(zhí)行imagepreview函數(shù)
關(guān)鍵參數(shù)：圖片數(shù)組、圖片索引、是否可關(guān)閉
3、點(diǎn)擊圖片調(diào)用open函數(shù)預(yù)覽效果
在vant中 ImagePreview 圖片預(yù)覽的詳細(xì)參數(shù)請(qǐng)看這里點(diǎn)擊查看更多喔！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue.js?3.0中，推出了新的組合式API，使得開(kāi)發(fā)者能夠更加方便靈活地編寫(xiě)Vue組件，這也是組合式?API?成為了?Vue?新的開(kāi)發(fā)范式，與傳統(tǒng)的選項(xiàng)?API?相比，組合式?API?更加靈活、易于維護(hù)的原因，在本文中，我們將詳細(xì)介紹?Vue?組合式API的風(fēng)格及使用2023-06-06
這篇文章主要介紹了前端Vue中常用rules校驗(yàn)規(guī)則詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
大部分中文應(yīng)用彈出的默認(rèn)鍵盤(pán)是簡(jiǎn)體中文輸入法鍵盤(pán),在輸入用戶(hù)名和密碼的時(shí)候,如果使用簡(jiǎn)體中文輸入法鍵盤(pán),用戶(hù)的輸入記錄會(huì)被緩存下來(lái)所以我們需要一個(gè)安全鍵盤(pán),本文給大家介紹了如何基于vue封裝一個(gè)安全鍵盤(pán)組件,需要的朋友可以參考下2023-12-12
vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)
本文主要介紹了vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
解決vue-cli項(xiàng)目開(kāi)發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問(wèn)題
最近開(kāi)發(fā)一個(gè)vue項(xiàng)目時(shí)遇到電腦卡死問(wèn)題，突然間系統(tǒng)就非?？?，然后卡著卡著就死機(jī)了，鼠標(biāo)也動(dòng)不了了，只能冷啟動(dòng)。這篇文章主要介紹了vue-cli項(xiàng)目開(kāi)發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問(wèn)題,需要的朋友可以參考下2019-10-10
詳解vue+vuex+koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
這篇文章主要介紹了vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實(shí)現(xiàn)切換密碼的顯示與隱藏效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)功能實(shí)現(xiàn)
在vue項(xiàng)目中，有時(shí)候可能會(huì)用到element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)，這篇文章主要介紹了element-ui form表單的動(dòng)態(tài)rules校驗(yàn),我們可以巧妙的運(yùn)用element-ui form表單里面form-item的校驗(yàn)規(guī)則來(lái)處理，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗(yàn)
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗(yàn)的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
這篇文章主要為大家介紹了Vue.use的原理和設(shè)計(jì)源碼探究詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02