vue图片查看器

vue 安装图片查看器插件
安装
cnpm install v-viewer
引用
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
用法
render函数中调用 异步加载，西药render之后马上给图片数组赋值，否则报错；
render: (h, params) => {
this.imageUrls = [
"http://t2.hddhhn.com/uploads/tu/20150700/akgj2qchk3z.jpg",
"../../../../../static/img/img/anchor.png",
"../../../../../static/img/img/iocn-worker.png"
];
return h("div", {、、。。。。。

传入配置项： v-viewer="{inline: true}"
el.$viewer来获取viewer实例
TEMPLETE
<div class="ima" v-viewer.static="{inline: true}" v-viewer="{movable: true}">
<img v-show="false" v-for="src in imgs" :src="src" :key="src">
</div>
<button type="button" @click="show">Show</button>

data() {
return {
imgs: [
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
]
};
},
methods: {
show() {
const viewer = this.$el.querySelector(".ima").$viewer;
viewer.show();
}
},
//end

转载于:https://www.cnblogs.com/sx00/p/10913901.html