目录
1、通过鼠标滚轮来实现
1、通过鼠标滚轮来实现
其中有限制元素多少不允许放大和缩小，根据实际情况调整scale的值来实现操作<template><div @wheel="handlerWheel" ref="divDom":style="{ 'transform': `scale(${scale})` }">我就是被放大和缩小的元素</div></template><script>data() {return {scale: 1}},methods: {// 放大zoomIn() {this.scale += 0.1; // 每次放大增加0.1},// 缩小zoomOut() {if (this.scale > 0.1) {this.scale -= 0.1; // 每次缩小减少0.1，最小缩放比例为0.1}},// 监听鼠标滚轮事件handlerWheel(e){// e.deltaY > 0: 向下滚动// e.deltaY < 0: 向上滚动if( e.deltaY > 0 ){// 缩小( scale等于0.2就不允许继续缩小了 )if( this.scale.toFixed(1) != 0.2 ){this.zoomOut();}}else{// 放大( scale等于3.3就不允许继续放大了 )if( this.scale.toFixed(1) != 3.3 ){this.zoomIn();}}}}</script>
如果觉得《Vue 实现元素的放大和缩小》对你有帮助，请点赞、收藏，并留下你的观点哦！
