vue中使用viewer.js 插件

一、预览图二、地址及参数viewer.js GitHub地址：https://github.com/fengyuanchen/viewerjs 演示地址：https://fengyuanchen.github.io/viewerjs/名称类型默认值说明inline布尔值false启用 inline 模式button布尔...

一、预览图

二、地址及参数

viewer.js GitHub地址：https://github.com/fengyuanchen/viewerjs
演示地址：https://fengyuanchen.github.io/viewerjs/

三、代码示例

3.1 引入组件

全局引入：

import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer'; //图片浏览组件
Vue.component('Viewer', Viewer);
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
});
Viewer.setDefaults({
    Options: {
        'inline': false,
        'button': true,
        'navbar': false,
        'title': false,
        'toolbar': true,
        'tooltip': true,
        'movable': true,
        'zoomable': true,
        'rotatable': true,
        'scalable': true,
        'transition': true,
        'fullscreen': true,
        'keyboard': true,
        'url': 'data-source'
    }
});

局部引入：

import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer'; //图片浏览组件
export default {
        components: {
           Viewer 
        },
}

3.2 html

<viewer ref="viewer" :options="options" :images='imgArr' style="display: none;" @inited="inited">
      <img v-for="(src,index) in imgArr" :key="index" :src="src" :onerror="errorDefaultImg">
</viewer>

3.3 js

data(){
	return{
		imgArr: [], //存放所有的图片地址
        options: {
           	title: false, //预览组件-不显示标题
         },
         index: 0, //当前图片的索引
         errorDefaultImg: require('../../../../assets/none-img.jpg'),//错误图片处理（虽然我也不知道为啥不太好使）
	}
},
methods: {
	//获取请求数据
	getListData() {
      	const params = {search: this.searchVal, pageSize: this.pageSize, page: this.page};
         getImages(params).then(res => {
            	this.imgArr = [];
                if (res.code == 0) {
                    const dataArr = res.data;
                    this.listData = dataArr.map(item => {
                         if (item.path) this.imgArr.push(item.path);// 预览组件传的值
                         if (item.path == this.value)item.selected = true;
                          else item.selected = false;
                            return item;
                     });
                     this.total = res.total;
                 }
           });
     },
	//初始化预览组件
     inited(viewer) {
         this.$viewer = viewer;
     },

     onPreview: debounce(function (imgIndex) {
         // 显示预览组件
         this.$viewer.show();
         // 从当前图片开始预览
         this.$viewer.view(imgIndex);
     }, 300),
}

完结撒花~