vue3 v-html中使用v-viewer

安装：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以供查看的位置。
},
});
使用

 
      
    
    
      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",
      ],
    };
  },
`

``

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19