安装
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,
});