最近在vue移动端项目里使用v-viewer这个图片预览插件,设置配置项的时候,一直不生效,搜了下也都是一样的设置。折磨了半天,坑。
1、安装依赖
npm install v-viewer --save
2.引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer);
3.配置
先放错误不生效的配置
// 都是这种配置,根本不生效,折磨半天
Viewer.setDefaults({
Options: {
'inline': true,
'button': true,
'navbar': true,
'title': true,
'toolbar': true,
'tooltip': true,
'movable': true,
'zoomable': true,
'rotatable': true,
'scalable': true,
'transition': true,
'fullscreen': true,
'keyboard': true,
'url': 'data-source'
}
})
正确配置项
Viewer.setDefaults({
'inline': false, //启用inline模式
'button': false, //显示右上角关闭按钮
'navbar': true, //显示缩略图导航
'title': false, //显示当前图片的标题
'toolbar': false, //显示工具栏
'tooltip': true, //显示缩略百分比
'movable': true, //图片是否可移动
'zoomable': true, //图片是否可缩放
'rotatable': true, //图片是否可旋转
'scalable': true, //图片是否可反转
'transition': true, //使用css3过度
'fullscreen': false, //播放时是否全屏
'keyboard': true, //
})
多了一层,不要添加那个Options对象就好了。
就这样