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

分手后的思念是犯贱 2022-01-20 05:17 1190阅读 1赞

**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 文件

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