vue基于viewer图片查看器

背景：公司正在用vue开发一款后台管理系统，有一个需求要查看图片：要求图片能够预览、放大、缩小、旋转、连续播放功能，写了很久都没能达到预想要求。
然后就在网上找相关插件，也没有找到vue相关的图片插件，情急之中就找到了一个JQ插件：viewer.js。于是乎就想着怎么把这个插件搬到vue组件里面来。

在vue里使用viewer.js

======

现在就有3个难题 ：

1.引入jQ
2.引入viewer
3.正确使用viewer

1.项目是用webpack打包的，引入jq、viewerjs网上案例很多，就直接上步骤

a.首先需要添加项目中jquery、viewerjs的依赖

`npm install jquery viewerjs --save-dev`

b.在build目录中配置webpack.base.config.js

module: {
        
        resolve: {
            extensions: ['.js', '.vue'],
            alias: {
                'vue': 'vue/dist/vue.esm.js',
                '@': resolve('../src'),
                'jquery': 'jquery' 
            }
        },
        plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery"
          })
       ],
    }

c.在.vue文件中引入

import $ from 'jquery'
import Viewer from 'viewerjs'

###2.项目中使用viewerjs

#####html代码：

<div style='display:none;'>
    <ul id="image">
        <li v-for='(item, index) in urlArr'>
            <img :src="item.url" :alt="item.title" :id='"a" + index' :key='index'>
        </li>
    </ul>
</div>

#####js代码：

if(substr === 'jpg' || substr === 'png') {
      //jpg png 图片  引用viewer.js
      let that = this;
      setTimeout(function () {
        //生成viewer实例
        var viewer = new Viewer(document.getElementById('image'));
        //点击当前图片触发展示当前图片的放大图
        let imgIndex = 0;
        that.urlArr.map((item, index) => {
            if ( item.url === url ) {
                imgIndex = index
            }
        })
        $('#a' + imgIndex).trigger("click")
      }, 200);
}else {
    //这里检查是否是PDF word 等其他url  如果是则链接新的窗口打开查看
    window.open(url,'_blank') 
}

#####注意事项：

######a.页面中隐藏有一个div，专门存放图片列表 urlArr

######b.动态获取、加载图片需要时间，这里设置setTimeout 200毫秒 ，this重新指向that

######c.动态绑定id，用jQ的trigger触发对应图片的 viewer

###参考文献

#####viewerjs使用手册

赏

1分也是爱

微信