vue 按钮控制鼠标滚轮放大缩小

一、 思路:首先知道属性为transform(1,0,0,1,0,0),数字1 的位置就是放大缩小的数值,知道后就好办了,设置一个变量,初始值为1,缩小时判断>0.5可以 - =0.1,放大时判断小于2, +=0.1,就达到了放大缩小的目的.二、代码1.data中变量2.函数

一、 思路:首先知道属性为transform(1,0,0,1,0,0),数字1 的位置就是放大缩小的数值,知道后就好办了,设置一个变量,初始值为1,缩小时判断>0.5可以 - =0.1,放大时判断小于2, +=0.1,就达到了放大缩小的目的.

二、代码

1.data中变量

numMin: 1,

2.函数

//缩小按钮方法zoomMin() {this.$nextTick(() => {if (this.numMin > 0.5) {this.numMin -= 0.10}document.querySelector('.orgchart').style.transform = `matrix(${this.numMin}, 0, 0, ${this.numMin}, 0, 0)`})},//放大按钮方法zoomMax() {this.$nextTick(() => {if (this.numMin < 2) {this.numMin += 0.10}document.querySelector('.orgchart').style.transform = `matrix(${this.numMin}, 0, 0,${this.numMin}, 0, 0)`})},

如果觉得《vue 按钮控制鼠标滚轮放大缩小》对你有帮助，请点赞、收藏，并留下你的观点哦！