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

1、首先是安裝

npm install v-viewer --save

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

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

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

4、代碼的使用

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

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

5、放大后效果圖：

?

轉載于:https://www.cnblogs.com/wenrain/p/10155936.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。