快捷導(dǎo)航

圖片預(yù)覽插件vue-photo-preview的使用示例詳解

更新時(shí)間：2023年08月16日 10:43:05 作者：zuo-yiran

這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、安裝

npm i vue-photo-preview --save

或者用淘寶鏡像

cnpm i vue-photo-preview --save

2、引入

打開(kāi)項(xiàng)目中main.js，添加如下代碼

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

注：引入可進(jìn)行配置，部分常用配置項(xiàng)：

maxSpreadZoom: 1, // 預(yù)覽圖最大的倍數(shù)，默認(rèn)2倍
fullscreenEl: false, //是否顯示右上角全屏按鈕
closeEl: true, //是否顯示右上角關(guān)閉按鈕
tapToClose: true, //點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫(kù)
shareEl: false, //是否顯示分享按鈕
zoomEl: false, //是否顯示放大縮小按鈕
counterEl: false, //是否顯示左上角圖片數(shù)量按鈕
arrowEl: true,  //是否顯示左右箭頭（pc瀏覽器模擬手機(jī)時(shí)）
tapToToggleControls: true, //點(diǎn)擊應(yīng)切換控件的可見(jiàn)性
clickToCloseNonZoomable: true //點(diǎn)擊圖片應(yīng)關(guān)閉圖庫(kù)，僅當(dāng)圖像小于視口的大小時(shí)

具體配置完整引入如下所示：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
  maxSpreadZoom: 1, // 預(yù)覽圖最大的倍數(shù)，默認(rèn)2倍
  fullscreenEl: false, //是否顯示右上角全屏按鈕
  closeEl: true, //是否顯示右上角關(guān)閉按鈕
  tapToClose: true, //點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫(kù)
  shareEl: false, //是否顯示分享按鈕
  zoomEl: false, //是否顯示放大縮小按鈕
  counterEl: false, //是否顯示左上角圖片數(shù)量按鈕
  arrowEl: true,  //是否顯示左右箭頭（pc瀏覽器模擬手機(jī)時(shí)）
  tapToToggleControls: true, //點(diǎn)擊應(yīng)切換控件的可見(jiàn)性
  clickToCloseNonZoomable: true //點(diǎn)擊圖片應(yīng)關(guān)閉圖庫(kù)，僅當(dāng)圖像小于視口的大小時(shí)
}
Vue.use(preview, options)
Vue.use(preview)

3、使用

直接使用：

<img v-show="picUrl!=''" class="pic-icon" :src="picUrl" preview preview-text="風(fēng)景">

注：preview-text為圖片的描述

如圖：

圖片多的話，可以根據(jù)preview分組進(jìn)行使用。

<img src="地址" preview="1" preview-text="分組1——1">
<img src="地址" preview="1" preview-text="分組1——2">
<img src="地址" preview="2" preview-text="分組2——1">
<img src="地址" preview="3" preview-text="分組3——1">

如圖片數(shù)據(jù)請(qǐng)求完，調(diào)用this.$previewRefresh()。

到此這篇關(guān)于圖片預(yù)覽插件vue-photo-preview的使用的文章就介紹到這了,更多相關(guān)vue-photo-preview使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: