快捷導(dǎo)航

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

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

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

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()。

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

您可能感興趣的文章: