图片预览----v-viewer插件的使用

效果：

 

使用：

1、下载插件：npm install v-viewer

2、在需要使用v-viewer的页面引入

    import 'viewerjs/dist/viewer.css'
    import Viewer from 'v-viewer'
    import Vue from 'vue'
    Vue.use(Viewer)

　　或者全局引入：

　　import 'viewerjs/dist/viewer.css'
　　import Viewer from 'v-viewer'
　　Vue.use(Viewer)

3、如果是一张图片，可以使用v-viewer指令：

    <div v-viewer>
      <img :src="showImg">
    </div>

　　如果是多种图片，可以先声明img数组，使用viewer标签：

    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>

 

4、react中viewer插件的使用：图片预览：基于react-viewer封装图片查看器