Why
本期企業(yè)微信版想實(shí)現(xiàn)圖片放大縮小預(yù)覽，圖片內(nèi)容來自于第三方（此處為后臺(tái)接口，前后端分離）。類似朋友圈圖片預(yù)覽
How
在網(wǎng)上找了很多圖片預(yù)覽插件铐拐，但是好多都不太符合我們項(xiàng)目需求，主要阻礙就是這些圖片不能前端自己控制练对，只能通過某些手段找到這些圖片然后給其綁定一些方法遍蟋，正好這些方法實(shí)現(xiàn)的就是放大縮小圖片。
試用過的插件：vue-preview锹淌、vue-photo-preview匿值、vue-picture-preview赠制、vue-directive-image-previewer（排序可以感受為好用程度）
當(dāng)時(shí)已經(jīng)差不多選中了第一種 vue-preview赂摆，也找到了用法，但是最后不好走下去了钟些，$preview.open 報(bào)錯(cuò)烟号，發(fā)現(xiàn)這個(gè)插件已經(jīng)升級(jí)，沒有網(wǎng)上說的那種用法了政恍，搞了半天汪拥，好慘了，我都快絕望了篙耗，咋不行啊迫筑，現(xiàn)在的用法已經(jīng)完全封裝成 vue 組件的形式
Next
嘿嘿，雖然它升級(jí)了宗弯，但是我還是找到了沒升級(jí)的一版 vue2-preview（別人封裝的這個(gè)脯燃，其實(shí)就是 vue-preview 的最初版本）
來看用法：
1、npm i vue2-preview -S
2蒙保、import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
3辕棚、給 img 標(biāo)簽綁定 click 事件，并綁定 class="preview-img" 類邓厕；
如果是可以直接操作的 img 標(biāo)簽逝嚎，那么直接綁定
<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 }]
如果是你代碼里看不到的標(biāo)簽，渲染出來能看详恼，那么需要手動(dòng)綁定了补君，eg：需要查看富文本框里的圖片
<quill-editor ref="myQuillEditor" class="calc-img" :options="editorOption" v-model="content" @ready="onEditorReady($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor>
//給富文本框里的每個(gè)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);
});
}
},
//點(diǎn)擊圖片獲取打開相應(yīng)圖片預(yù)覽的方法
show(index) {
this.previewlist = []
for (let i = 0; i < this.imgList.length; i++) {
// 獲取圖片實(shí)際大小
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);//調(diào)用圖片預(yù)覽方法
}, 0); }
//執(zhí)行 mounted: function() { this.calcImgs() }
Attention
1、引用時(shí)報(bào)錯(cuò)怎么解決昧互？
解決方法：找到此插件的 preview.vue 文件
還有更好的插件大家一起分享哦
