viewers.js 图片查看插件使用说明-vue中引用

viewers.js 图片查看插件

官方地址 官方地址

安装

npm install viewerjs

在main.js 中引入

// 图片查看插件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Viewer.setDefaults(
  {
    'inline': false, // 启用inline模式
    'button': true, // 显示右上角关闭按钮
    'navbar': false, // 显示缩略图导航
    'title': false, // 显示当前图片的标题
    'toolbar': false, // 显示工具栏
    'tooltip': true, // 显示缩略百分比
    'movable': true, // 图片是否可移动
    'zoomable': true, // 图片是否可缩放
    'rotatable': true, // 图片是否可旋转
    'scalable': false, // 图片是否可反转
    'transition': true, // 使用css3过度
    'fullscreen': false, // 播放时是否全屏
    'keyboard': true,

    ready: function(e) {
      console.log(e.type, '组件以初始化')
    },
    show: function(e) {
      console.log(e.type, '图片显示开始')
    },
    shown: function(e) {
      console.log(e.type, '图片显示结束')
    },
    hide: function(e) {
      console.log(e.type, '图片隐藏完成')
    },
    hidden: function(e) {
      console.log(e.type, '图片隐藏结束')
    },
    view: function(e) {
      console.log(e.type, '视图开始')
    },
    viewed: function(e) {
      console.log(e.type, '视图结束')
      // 索引为 1 的图片旋转20度
    },
    zoom: function(e) {
      console.log(e.type, '图片缩放开始')
    },
    zoomed: function(e) {
      console.log(e, 'e')
      console.log(this.viewer, 'this.viewer')
      console.log(e.type, '图片缩放结束')
    }
  }
)
//也可以把上面部分抽出去单独的js中暴露出来 看自己的代码习惯-这咯为了方便阅读就放在main.js 中了
Vue.use(Viewer)

在页面中需要用到这个viewer 标签包裹住img 标签

 <viewer v-if="imgShow">
      < img id="descimgBox"
           class="descimgBox"
           :src="imgUrl">
    </viewer>

此时需要注意点击之后有小小的BUG ，点击事件传你需要查看的URL的图片，然后把图片的宽高的css 属性设置为0 用下方的方法展示大图即可

  this.imgShow = true
        this.imgUrl = url
        this.$nextTick(() => {
          document.querySelector('#descimgBox').click()
          console.log(document.querySelector('#descimgBox'))
        })