v-viewer 如何隐藏下面的按钮

前言：v-viewer是一款用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewerjs封装

1、问题

最近需要使用图片预览，一顿百度，发现了v-viewer这么个好用的东西，然后引入进项目。效果是这样式的：

下面这一排小图标我想给去掉，可咋整。本着不懂就百度的道理，于是我查到了这样的配置：

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
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' }
})

options里面全部设置为false，也无法去掉那些图标，很显然这种配置这是无效的（奇怪的是，网上大都是这个配置）

2、排查思路

当然首选官方地址查看喽

• viewerjs

You may set viewer options with new Viewer(image, options). If you want to change the global default options, You may use Viewer.setDefaults(options).
这是viewerjs 上关于配置的一句话，显然setDefaults里面具体的配置对象嘛，即Viewer.setDefaults({})
，并不是再包一层Viewer.setDefaults({Options: {} })

• v-viewer

关于封装的v-viewer vue组件，我们可以看到关于defaultOptions的配置描述，有两种处理方式

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})
// And you can reset the default options at any other time:
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
Viewer.setDefaults({
  zIndexInline: 2017
})

3、问题解决

通过官方文档的查阅，我们可以清楚的知道，配置究竟是是如何处理的，就本次需要解决的问题，贴出完整的配置示例

• 方案1

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import Vue from 'vue'

Vue.use(Viewer)
Viewer.setDefaults({
  // 需要配置的属性
  toolbar: false
})

• 方案2

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import Vue from 'vue'

Vue.use(Viewer, {
  defaultOptions: {
    // 需要配置的属性
    toolbar: false
  }
})

4、总结

1. viewerjs开源地址
2. v-viewer组件开源地址
3. v-viewer中文文档