vue图片查看

1、安装插件：npm install v-viewer --save 

2、安装完成，在需要的页面或main.js 中引入配置文件：

import Vue from 'vue';

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

3、注册组件和组件配置参数

Vue.use(Viewer, {

defaultOptions: {

        zIndex: 1, // 层级

        inline: false, // 启用 inline 模式

        button: true, // 显示右上角关闭按钮

        navbar: false, // 显示缩略图导航

        title: false, // 显示当前图片标题

        toolbar: false, // 工具栏

        tooltip: true, // 显示缩放百分比

        movable: true, // 图片是否可以移动

        zoomable: true, // 图片是否可以缩放

        rotatable: false, // 图片是否可旋转

        scalable: false, // 图片是否可翻转

        transition: true, // css3过度

        fullscreen: true, // 播放时是否全屏

        keyboard: false, // 是否支持键盘

        loop: false, // 图片是否循环播放

}

})

4、在html内写上一下代码

<viewer  :images="imgList">

      <div v-for=" item  in  imgList " :key="item">

            <img :src="item">

     </div>

</viewer>