Why
本期企业微信版想实现图片放大缩小预览，图片内容来自于第三方（此处为后台接口，前后端分离）。类似朋友圈图片预览
How
在网上找了很多图片预览插件，但是好多都不太符合我们项目需求，主要阻碍就是这些图片不能前端自己控制，只能通过某些手段找到这些图片然后给其绑定一些方法，正好这些方法实现的就是放大缩小图片。
试用过的插件：vue-preview、vue-photo-preview、vue-picture-preview、vue-directive-image-previewer（排序可以感受为好用程度）
当时已经差不多选中了第一种 vue-preview，也找到了用法，但是最后不好走下去了，$preview.open 报错，发现这个插件已经升级，没有网上说的那种用法了，搞了半天，好惨了，我都快绝望了，咋不行啊，现在的用法已经完全封装成 vue 组件的形式
Next
嘿嘿，虽然它升级了，但是我还是找到了没升级的一版 vue2-preview（别人封装的这个，其实就是 vue-preview 的最初版本）
来看用法：
1、npm i vue2-preview -S
2、import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
3、给 img 标签绑定 click 事件，并绑定 class="preview-img" 类；
如果是可以直接操作的 img 标签，那么直接绑定
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
list: [{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400 },
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900 }]
如果是你代码里看不到的标签，渲染出来能看，那么需要手动绑定了，eg：需要查看富文本框里的图片
<quill-editor ref="myQuillEditor" class="calc-img" :options="editorOption" v-model="content" @ready="onEditorReady($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor>
//给富文本框里的每个img绑定click事件
calcImgs() {
this.imgList = document.getElementsByClassName("calc-img")[0].getElementsByTagName("img");
for (let i = 0; i < this.imgList.length; i++) {
this.imgList[i].setAttribute("class", "preview-img");
this.imgList[i].addEventListener("click", e => {
this.show(i);
});
}
},
//点击图片获取打开相应图片预览的方法
show(index) {
this.previewlist = []
for (let i = 0; i < this.imgList.length; i++) {
// 获取图片实际大小
let newImage = {};
let img = new Image();
img.src = this.imgList[i].src;
img.onload = function() {
newImage.src = img.src;
newImage.w = img.width;
newImage.h = img.height;
};
this.previewlist.push(newImage);
}
etTimeout(() => {
this.$preview.open(index, this.previewlist);//调用图片预览方法
}, 0); }
//执行 mounted: function() { this.calcImgs() }
Attention
1、引用时报错怎么解决？
解决方法：找到此插件的 preview.vue 文件
还有更好的插件大家一起分享哦
