vue中实现图片预览放大，缩小，旋转等功能，Viewer.js第一次点击图片无法显示(vue使用)

雨文2021

已于 2022-08-14 18:38:08 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

于 2022-08-14 17:08:02 首次发布

本文链接：https://blog.csdn.net/qq_28170105/article/details/126329850

版权

实现效果：

A：点击多次的时候数据错乱的问题。这是因为一个页面只能有一个viewer，所以每次事件结束需要进行销毁viewer，然后重新新建就可以。

B：异步数据填充的时候，数据拿到的顺序影响了渲染，所以导致第一次点击照片无法显示，但是console.log能打印出自己需要展示的数组（因为console.log不是立即执行的），这是因为顺序问题，如果出现这个问题的话，是第一次new viewer的顺序在拿到数据之前。解决办法在vue里面就是使用this.$nextTick(()=>{})

实现步骤：
1、安装插件
cnpm install viewerjs 推荐
npm install viewerjs
2、案例代码
<template>
  <div id="index" ref='imgView' class="image_preview">
    <ul class="imgUrl" v-if="imgArr!=null && imgArr.length!=0">
        <li v-for="(item,index) of imgArr" v-bind:key="index" >
           <img :src="item" alt="图片描述">
        <