vue 实现元素的放大缩小

柔情只为你懂 2022-09-04 07:49 558阅读 0赞

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

  1. // 放大
  2.     enlarge() { 
  3.       this.$nextTick(() => { 
  4.           // imageWrapper 获取元素
  5.         let imageWrapper = document.getElementById('imageWrapper');
  6.         this.scal = (parseFloat(this.scal) + 0.10).toFixed(2);
  7.         imageWrapper.style.transform = "scale(" + this.scal + ")";
  8.         imageWrapper.style.transformOrigin = '0 0';
  9.       })
  10.     }
  12. // 缩小
  13. narrow() { 
  14.       this.$nextTick(() => { 
  15.           // imageWrapper 获取元素
  16.         let imageWrapper = document.getElementById('imageWrapper');
  17.         this.scal = (parseFloat(this.scal) - 0.10).toFixed(2);
  18.         imageWrapper.style.transform = "scale(" + this.scal + ")";
  19.         imageWrapper.style.transformOrigin = '0 0';
  20.       })
  21.     },

发表评论

表情：
评论列表 （有 0 条评论，558人围观）

还没有评论，来说两句吧...

相关阅读