安装：npm install v-viewer@next
在main.js中配置
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
app.use(Viewer, {
Options: {
inline: true, //默认值：false。启用内联模式。
button: true, //在查看器的右上角显示按钮。
navbar: false, //指定导航栏的可见性。
title: true, /指定标题的可见性和内容。
toolbar: true, //指定工具栏及其按钮的可见性和布局。
tooltip: true, //放大或缩小时显示带有图像比率（百分比）的工具提示。
movable: true, //启用以移动图像。
zoomable: true, //启用以缩放图像
rotatable: true, //启用以旋转图像
scalable: true, //启用以缩放图像。
transition: true, //为某些特殊元素启用CSS3转换。
fullscreen: true, //启用以在播放时请求全屏。
keyboard: true, //启用键盘支持。
url: 'data-source', //默认值：'src'。定义获取原始图像URL以供查看的位置。
},
});
使用
<viewer :images="photo">
<img v-for="(src, index) in photo" :src="src" :key="index" />
</viewer>
data() {
return {
photo: [
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
],
};
},
`
``