移动端怎么预览图片放大缩小之 vue2-preview

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);
}
setTimeout(() => {
this.$preview.open(index, this.previewlist);//调用图片预览方法
}, 0);
}
//执行
mounted: function() {
  this.calcImgs()
}

Attention

1、引用时报错怎么解决?
7bea4cb862a344c891a8a37e2bb9994f_blob.png

解决方法:找到此插件的 preview.vue 文件
c15a5ac43dbe424ea6658039c5b5b4ff_blob.png

还有更好的插件大家一起分享哦 stuck_out_tongue_winking_eye