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中文文檔