移動端項目中需要圖片預(yù)覽的功能，但本身使用mintui，vantui中雖然也有，但是為了一個組件安裝這個有點兒多余，就選用了vue-photo-preview插件實現(xiàn)（其實偷懶也不想自己寫）。
1、安裝

npm i vue-photo-preview --save

或者用淘寶鏡像

cnpm i vue-photo-preview --save

2、引入
打開項目中main.js，添加如下代碼

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

注：引入可進行配置，部分常用配置項：

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

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

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

3、使用
直接使用：

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

注：preview-text為圖片的描述

如圖：

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

<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ù)請求完，調(diào)用this.$previewRefresh()。文章來源地址http://www.zghlxwxcb.cn/news/detail-643278.html

到了這里，關(guān)于圖片預(yù)覽插件vue-photo-preview的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！