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) || 1setWheelScale(binding, {el,cssVarName,currentScale,minScale,maxScale,})if (el) {el.onwheel = (e) => {currentScale = el.style.getPropertyValue(cssVarName) || 1if (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, currentScale, minScale, maxScale) => {// 现在缩放范围if (currentScale > maxScale) {currentScale = maxScale} else if (currentScale < minScale) {currentScale = minScale}let cssText = el.style.cssTextlet cssTextList = cssText.split(";")let isExist = falselet isExistIndex = -1for (let index = 0; index < cssTextList.length; index++) {const element = cssTextList[index]if (element.includes(cssVarName + ":")) {isExist = trueisExistIndex = indexbreak}}if (isExist) {cssTextList[isExistIndex] = `--scale: ${currentScale}`} else {cssTextList.push(`--scale: ${currentScale}`)// el.setAttribute("style", `--scale: ${currentScale}`)}cssText = cssTextList.join(";")el.style.cssText = cssTextreturn currentScale
}
// 设置 style.transform
const setTransformCss = (el, cssVarName) => {let transformCssString = el.style.transformlet regScaleGlobal = /scale\(.*?[ )]*[)]+[ ]*/g //匹配 Scale属性 全局if (regScaleGlobal.test(transformCssString)) {transformCssString = transformCssString.replace(regScaleGlobal,` scale(var(${cssVarName})) `)} else {transformCssString += " " + `scale(var(${cssVarName}))`}el.style.transform = transformCssString
}
export const setWheelScale = (binding = {}, options) => {const { el, cssVarName, currentScale, minScale, maxScale } = optionsconst nowScale = setVarScale(el, cssVarName, currentScale, minScale, maxScale)setTransformCss(el, cssVarName)// 缩放改变回调函数const wheelScaleHandle = binding.value || nullif (wheelScaleHandle instanceof Function) {wheelScaleHandle({el,cssVarName,maxScale,minScale,currentScale: nowScale,setScale: (_scale) => {setWheelScale(binding, { ...options, currentScale: _scale })},binding,})}
}2.在main.js中注册全局指令
import { initVWheelScale} from "@/directives/wheel-scale"
initVWheelScale(Vue)
3.在需要用到的组件中的dom元素上使用即可
v-wheelScale
)
)
