vue 实现元素的放大缩小

使用transform 设置 scale 进行放大缩小,使用 transformOrigin 定位基点,在 data 中定义变了 scal 为 1

// 放大
    enlarge() {
    
    
      this.$nextTick(() => {
    
    
      	// imageWrapper 获取元素
        let imageWrapper = document.getElementById('imageWrapper');
        this.scal = (parseFloat(this.scal) + 0.10).toFixed(2);
        imageWrapper.style.transform = "scale(" + this.scal + ")";
        imageWrapper.style.transformOrigin = '0 0';
      })
    }
// 缩小
narrow() {
    
    
      this.$nextTick(() => {
    
    
      	// imageWrapper 获取元素
        let imageWrapper = document.getElementById('imageWrapper');
        this.scal = (parseFloat(this.scal) - 0.10).toFixed(2);
        imageWrapper.style.transform = "scale(" + this.scal + ")";
        imageWrapper.style.transformOrigin = '0 0';
      })
    },

猜你喜欢

转载自blog.csdn.net/weixin_44640323/article/details/119635025