Vue.directive('zoom-restriction', { inserted: function (el, binding) { const maxZoomLevel = 1.5; // 最大缩放级别 const minZoomLevel = 0.75; // 最小缩放级别 function handleWheelEvent(e) { const zoomLevel = window.devicePixelRatio; if ((zoomLevel >= maxZoomLevel && e.deltaY < 0) || (zoomLevel <= minZoomLevel && e.deltaY > 0)) { e.preventDefault(); } } function handleKeyDownEvent(e) { const zoomLevel = window.devicePixelRatio; const isZoomShortcut = (e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '-' || e.key === '0' || e.key === '='); if (isZoomShortcut) { if ((zoomLevel >= maxZoomLevel && (e.key === '+' || e.key === '=')) || (zoomLevel <= minZoomLevel && e.key === '-') || (e.key === '0')) { e.preventDefault(); } } } window.addEventListener('wheel', handleWheelEvent, { passive: false }); window.addEventListener('keydown', handleKeyDownEvent, { passive: false }); el._handleWheelEvent = handleWheelEvent; el._handleKeyDownEvent = handleKeyDownEvent; }, unbind: function (el) { window.removeEventListener('wheel', el._handleWheelEvent); window.removeEventListener('keydown', el._handleKeyDownEvent); } });
<div v-zoom-restriction></div>
