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

雨文2021

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

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

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

本文链接：https://blog.youkuaiyun.com/qq_28170105/article/details/126329850

版权

本文介绍了在Vue项目中使用Viewer.js实现图片预览、放大、缩小及旋转功能时遇到的问题及其解决方案。主要问题包括：点击多次导致的数据错乱，以及异步数据填充下首次点击图片不显示的问题。解决方法是每次事件结束后销毁并重建viewer，以及在数据获取后使用`this.$nextTick()`确保正确渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

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="图片描述">

最低0.47元/天解锁文章