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