查看圖片主要使用的旋轉(zhuǎn)、翻轉(zhuǎn)、縮放、上下切換、鍵盤操作等功能都有。

1、首先是安裝

npm install v-viewer --save

2、安裝完在main.js里面引用（還要記得引用它的css樣式）下面有兩種調(diào)用方式

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

// vue注冊調(diào)用方法一：
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
}) import Vue from 'vue' import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //vue注冊調(diào)用方法二： Vue.use(Viewer); Viewer.setDefaults({Options: {"inline": true, //啟用 inline 模式 默認(rèn)false"button": true,　　//顯示右上角關(guān)閉按鈕 默認(rèn)true"navbar": true,　　//顯示縮略圖導(dǎo)航 默認(rèn)true"title": true,　　//顯示當(dāng)前圖片的標(biāo)題 默認(rèn)true"toolbar": true,　　// 顯示工具欄 默認(rèn)true"tooltip": true,　　// 顯示縮放百分比 默認(rèn)true"movable": true,　　//圖片是否可移動 默認(rèn)true"zoomable": true,　　//圖片是否可縮放 默認(rèn)true"rotatable": true,　　//圖片是否可旋轉(zhuǎn) 默認(rèn)true"scalable": true,　　//圖片是否可翻轉(zhuǎn) 默認(rèn)true"transition": true,　　//使用css3過度 默認(rèn)true"fullscreen": true,　　//是否全屏 默認(rèn)true"keyboard": true,　　//是否支持鍵盤 默認(rèn)true"url": "data-source" //設(shè)置大圖片的URL} });

4、代碼的使用

<template><viewer :images="images"><img v-for="src in images" :src="src" :key="src"></viewer> </template>

說明：只要img中傳入對應(yīng)的圖片的src即可，images是接口獲取的圖片地址數(shù)組 [‘images/img01.jpg’, ‘images/img02.jpg’, ‘images/img03.jpg’]

5、放大后效果圖：

?

轉(zhuǎn)載于:https://www.cnblogs.com/wenrain/p/10155936.html

總結(jié)

以上是生活随笔為你收集整理的vue项目 预览照片的插件 v-viewer的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。