viewer vue 文档_Vue插件v-viewer使用

安装

npm install v-viewer

npm i -S viewerjs

引入

引入这里我分成两步了

main.js中引入样式文件

import 'viewerjs/dist/viewer.css';

注册组件方法中引入v-viewer

// 图片预览插件

import Viewer from 'v-viewer';

export function pluginRegister() {

Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

Vue.use(tagCloud)

Vue.use(Viewer);

router.beforeEach((to, from, next) => {

var u = navigator.userAgent;

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isiOS && to.path !== location.pathname) {

// 此处不可使用location.replace

location.assign(to.fullPath)

} else {

next()

}

NProgress.start();

})

router.afterEach(route => {

NProgress.done();

})

}

这个pluginRegister再main.js中引入然后调用这个方法即可

使用

注册监听事件

window.eventBus.$on(

"global.image.preview",

(config: { imgList: string[]; index: number }) => {

if (config.imgList && config.imgList.length) {

this.viewerList = config.imgList;

const viewer: any = this.$refs.viewer;

viewer.$viewer.show();

// 为0或者不传时

if (config.index) {

setTimeout(() => {

viewer.$viewer.view(config.index);

}, 100);

}

}

}

);

window.eventBus.$emit("global.image.preview", {

imgList,

index: 1,

});