vue系列--图片通过鼠标滚轮放大缩小指令

最新推荐文章于 2025-05-29 10:48:25 发布

尾善爱看海

最新推荐文章于 2025-05-29 10:48:25 发布

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weichangit/article/details/136228307

1.将以下代码复制到src/directives/wheel-scale/index.js路径下

export const initVWheelScale = (Vue) => {
  Vue.directive("wheelScale", (el, binding) => {
    const {
      maxScale = 5,
      minScale = 0.5,
      initScale = 1,
      cssVarName = "--scale",
    } = binding.arg || {}
    let currentScale = initScale || el.style.getPropertyValue(cssVarName) || 1
    setWheelScale(binding, {
      el,
      cssVarName,
      currentScale,
      minScale,
      maxScale,
    })
    if (el) {
      el.onwheel = (e) => {
        currentScale = el.style.getPropertyValue(cssVarName) || 1

        if (e.wheelDelta > 0) {
          currentScale = currentScale * 1 + 0.1
        } else {
          currentScale = currentScale * 1 - 0.1
        }
        setWheelScale(binding, {
          el,
          cssVarName,
          currentScale,
          minScale,
          maxScale,
        })
      }
    }
  })
}
// 设置 --scale 变量 缩放比例
const setVarScale = (el, cssVarName, cu