最近在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对象就好了。
就这样

Logo

前往低代码交流专区

更多推荐