vue3 预览图片内放大缩小功能+加鼠标滚动事件放大缩小

功能介绍

在做后台时组件图片预览功能，这个图片放大缩小感觉有点意思，自己就写了一个简易小demo。

下面是制作完毕的视频（样式随便写了写有点丑不要介意）

暂时只有放大缩小功能

实现思路

目前有两个方向实现
	1）通过css transform：scale(1); 控制图片的缩放比实现放大缩小功能。
	但是弊端是只能根据你自己设定的宽度去缩放。下面是实现代码：

<div class="previewImage">
       <!--图片父元素，再此添加溢出隐藏-->
       <p class="show" v-show="display">{{ percentage + "%" }}</p>
       <p class="hint" v-show="status == 1">不能再放大了!</p>
       <p class="hint" v-show="status == 2">不能再缩小了!</p>
	<div class="Exhibition" :style="{ transform: `scale(${w}, ${h})` }" v-for="item in ImgList"
         :key="item.id"
         v-show="
           preViewID == item.id ? (item.switch = true) : (item.switch = false)
         "><!--这里循环的是放置图片的数组-->
		 <img
		   :src="item.img"
		   alt=""
		 />
	</div>
</div>
<!-- 导航图标  （这里我用的本地图片你们可以切换为网络图片测试）-->
<div class="BigNav">
  <img src="../assets/u120.png" @click="change(true)" alt="" /><!--加号-->
  <img
    src="../assets/u110.png"
    @click="change(false)"
    alt=""
  /><!--减号-->
  <img src="../assets/u100.png" alt="" />
  <img src="../assets/u190.png" alt="" />
  <img src="../assets/u170.png" alt="" />
  <img src="../assets/u160.png" alt="" />
  <img src="../assets/u150.png" alt="" />
  <img src="../assets/u200.png" alt="" />
  <img src="../assets/u180.png" alt="" />
  <img src="../assets/u130.png" alt="" />
  <img src="../assets/u140.png" alt="" />
</div>

	js部分

const ImgList = ref([
      {
        img: "https://www.helloimg.com/images/2022/06/22/ZnxrhX.png",
        id: "1",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/04/11/LVnutK.jpg",
        id: "2",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/04/11/LVpkVJ.png",
        id: "3",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/04/11/LVnutK.jpg",
        id: "4",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/06/23/jPCkOs.png",
        id: "5",
        switch: false,
      },
      {
        img: "https://s1.ax1x.com/2022/06/23/jPZRyT.png",
        id: "6",
        switch: false,
      },
    ]); //图片数组
    
// 加减改变时 每次
    let timeout;
    const change = (state) => {
      timeout && clearTimeout(timeout);
      display.value = true;
      if (state) {
        percentage.value += 0.1 * 100;//计算百分比
        w.value += 0.1;
        h.value += 0.1;
      } else {
        if (percentage.value > 50) {
          percentage.value -= 0.1 * 100;
          w.value -= 0.1;
          h.value -= 0.1;
        } else {
          status.value = 2;
        }
      }

      timeout = setTimeout(() => {
        status.value = 0;
        display.value = false;
      }, 500);
    };
// 鼠标滚动监听
    function handleScroll() {
      window.addEventListener("mousewheel", (e) => {
        var delta = 0;
        if (!e) e = window.event;
        if (e.wheelDelta) {
          //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
          delta = e.wheelDelta / 120;
          if (window.opener) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
        } else if (e.detail) {
          //FF浏览器使用的是detail,其值为“正负3”
          delta = -e.detail / 3;
        }
        // if (delta) handle(delta);
        // console.log(e);
        let direction = delta < 0 ? false : true; //true是向上
        change(direction);
      });
    }

	css部分就把父级设置宽高图片自适应就可以

其他方案实现请查看下一篇vue3 预览图片放大缩小功能百分比输出+鼠标滚动事件放大缩小（2）