移动端怎么预览图片放大缩小之 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 标签，那么直接绑定

list: [{

src: 'https://placekitten.com/600/400',

w: 600,

h: 400 },

{

src: 'https://placekitten.com/1200/900',

w: 1200,

h: 900 }]

如果是你代码里看不到的标签，渲染出来能看，那么需要手动绑定了，eg：需要查看富文本框里的图片

//给富文本框里的每个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 文件

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