vue3中使用 v-viewer 插件报错未定义的属性: Cannot set properties of undefined (setting ‘$viewer),和基本使用。
在网上搜了很久也没解决这个问题,在vue2中是不会报错的,后面查看官方文档和百度了几个小时以后,终于解决了,(我个人解决了,版本原因)。因为是 vue3,所以不能直接使用 Vue.use。1.先在main.js 引入。接着安装 viewerjs。
·
报错问题解决:
在网上搜了很久也没解决这个问题,在vue2中是不会报错的,后面查看官方文档和百度了几个小时以后,终于解决了,(我个人解决了,版本原因)。
首先我重新安装了v-viewer,安装指令:
npm install v-viewer@next
接着安装 viewerjs
npm install v-viewer@1.9.0
就解决了。
基本使用(只说最基础的,使用方法网上一大堆):
1.先在main.js 引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
因为是 vue3,所以不能直接使用 Vue.use
const vue = createApp(App);
vue.use(Viewer, {
Options: {
'inline': true,
'button': true, //右上角按钮
"navbar": true, //底部缩略图
"title": true, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": true, //是否支持键盘
"url": "data-source",
}
})
2. 组件中使用:
<viewer :images="srcList">
<img
:key="index"
v-for="(item,index) in srcList"
:src="item"
style="width: 128px; height: 128px"
/>
</viewer>
更多推荐
已为社区贡献9条内容
所有评论(0)