vue怎么通过 （ “鼠标点击” 或者 “触屏” ），实现图片和内容【拖拽、缩放】

安装插件 vue-zoomer

npm install --save vue-zoomer

全局main.js引入注册

import Vue from 'vue'
import VueZoomer from 'vue-zoomer'

Vue.use(VueZoomer)

页面调用

// 单图
<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
  <img
    src="./assets/landscape-1.jpg"
    style="object-fit: contain; width: 100%; height: 100%;"
  >
</v-zoomer>

// 多图
<v-zoomer-gallery
  style="width: 100vw; height: 100vh;"
  :list="['a.jpg', 'b.jpg', 'c.jpg']"
  v-model="selIndex"
></v-zoomer-gallery>

这里会有坑：

多图的情况下，我想对渲染出来的多张图片进行同样的功能操作，此处插件v-model只是取当前数组图片中的一张图进行此功能

解决方法：在 “ v-zoomer ” 单图中对 img 进行循环遍历取值操作即可

<div class="zoomer_box">
  <v-zoomer>
    <img
      v-for="(img, index) in imgurlList"
      :key="index"
      :src="img"/>
  </v-zoomer>
</div>

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~