Vue PC端图片预览插件

*手上的项目刚刚搞完了，记录一下项目中遇到的问题，留作笔记：

需求：

　　在项目中，须要展现用户上传的一些图片，我从后台接口拿到图片url后放在页面上展现，由于被图片我设置了宽度限制（150px）,因此图片被缩放了，需求说加一个图片预览的功能

 

参考文章：

　　https://blog.csdn.net/yp090416/article/details/81486581（vue点击图片放大预览图片支持旋转等）

 

准备工做：

　　（1）搜索插件：https://github.com/mirari/v-viewer（这是我百度查找的一个vue图片预览插件地址，里面有Live demo能够看效果）

　　（2）安装插件：

　　　　npm install v-viewer

　　（3）引入main.js

　　　　

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

Vue.use(Viewer)

// 这里是插件的默认设置
Viewer.setDefaults({
　zIndexInline: 9999
})

 

　　（4）HTML

<div
    class="el-input el-input--small"
    v-if="images.length>0"
    >
    <viewer>
       <img
          width="150"
          v-for="src in images"
          :src="src"
          :key="src"
           >
   </viewer>
</div>

基本工做搞完了，而后根据在线demo里的调试状况将复制Options里的配置结果放在main.js的Viewer.setDefaults({})中便可，以下：

//Vue.use(Viewer) 手动配置写法
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
  }
})

放一张效果图：

 

*说明：鼠标放置在图片上，拖动滚动条便可对图片进行放大缩小，也能够对图片进行拖动，以及翻转等等，若是咱们的images中有多张图片，那么点击图片下方的左右方向箭头，便可切换预览的图片