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

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、引用时报错怎么解决？

解决方法：找到此插件的 preview.vue 文件

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