vue项目 PC端点击查看大图

今天,发现了一款还不错的插件来实现查看大图,成熟度也比较高,支持各种操作

原作品的github地址为 https://github.com/mirari/v-viewer 

也有对应的中文文档,使用方法很详细,支持各种方式调用  https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

我目前使用的是组件内引用的方式

1.安装配置依赖

npm install v-viewer --save

2.在main.js中引入

也有各种参数,但还未深入理解其作用

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    inline: false,
    button: true,
    navbar: false,
    title: false,
    toolbar: true,
    tooltip: false,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: false,
    transition: true,
    fullscreen: false,
    keyboard: false
  }
})

3.单图片使用

      <viewer>
          <img src="../assets/1.jpg" alt="">
        </viewer>

效果

4.多图片使用

<viewer :images="images">
      <div style="display: flex;">
	      <img v-for="src in images" :key="src.url"  :src="src.url" width="300">
      </div>
</viewer>

　　

效果

参考链接:

1.https://blog.csdn.net/yp090416/article/details/81486581

2.https://www.cnblogs.com/secretAngel/p/10287796.html

3.https://github.com/mirari/v-viewer