Vue图片预览插件viewerjs

灰太狼 2021-12-16 08:13 960阅读 0赞

GitHub地址：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewerjs] 。  
1、安装：`npm install v-viewer --save`  
2、在vue中引用

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

3、vue注册调用，再调用setDefaults方法自定义配置。

Vue.use(Viewer);
    Viewer.setDefaults({
      'inline':true,
      'button':true, //右上角按钮
      "navbar": true, //底部缩略图
      "title": true, //当前图片标题
      "toolbar": true, //底部工具栏
      "tooltip": true, //显示缩放百分比
      "movable": true, //是否可以移动
      "zoomable": true, //是否可以缩放
      "rotatable": true, //是否可旋转
      "scalable": true, //是否可翻转
      "transition": true, //使用 CSS3 过度
      "fullscreen": true, //播放时是否全屏
      "keyboard": true, //是否支持键盘
      "url": "data-source",
      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度
        if(e.detail.index === 1){
            this.viewer.rotate(20);
        }
      },
      zoom: function (e) {
        console.log(e.type,'图片缩放开始');
      },
      zoomed: function (e) {
        console.log(e.type,'图片缩放结束');
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]  
4、使用

data() {
      return {
        images:[
          {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',index:1},
          {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',index:2},
          {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg',index:3},
          {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg',index:4},
        ]
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]

[https_github.com_fengyuanchen_viewerjs]: https://github.com/fengyuanchen/viewerjs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20211214/716fe12d0878498199a409da838593f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]: /images/20211214/e5f615e8ca0e4ecca83df21b974f294c.png