vue中如何获取元素正确的宽度(高度)

Question

1. 问题: 无法获取元素正确的宽度

首先看图

由图可知:

1. 刷新页面时 展示结果如上
2. canvas 元素的宽度为 1490px 超出 父元素
3. 谷歌浏览器渲染后计算出来的结果为 740px

2. 要解决的问题

让 canvas 元素的宽度与 谷歌浏览器计算的结果一致

3. 解决思路

1. 检测 vue 各个生命周期时该元素的宽度, 再把获得的宽度赋给 canvas
   从上图中可看到该结果已失败...
2. 刷新一下组件(在4中说明)

4. 奇怪的事情

1. 我右击刷新页面结果不会改变

   

2. 关闭右侧的 开发者调试栏, canvas 元素就会回归容器内

   

3. 此处使用的是 vue-cli, 我们修改一下该组件的内容然后保存, canvas 元素也会回归容器内
   修改前

   
   修改后

   

4. 补充
   将浏览器设置为非全屏状态, 然后改变浏览器的大小, canvas 元素也会回归容器内

5. 一个事实

虽然说上述存在着问题, 但在第一幅图中显示了 浏览器已经获取到该元素的宽度为正确的 740px

6. 一个解决方案

加了个延迟 能够解决问题, 但感觉不是很好, 期待有更好的解决方案

export const setCanvasWidth = that => {
  setTimeout(() => {
    const elWidthValue = that.$refs.el.offsetWidth;
    that.canvasWidth = `${elWidthValue}`; // props need String
  }, 300);
};

Answer 1

题主有没有尝试过在$nextTick，当页面渲染完毕后，再通过$el来获取父元素的高度，进而改变canvas的width属性？

Answer 2

尝试下 getComputedStyle 这个方法

Answer 3

我一般用指令绑定在元素上做触发，指令的触发肯定是渲染后执行的。

Answer 4

可以尝试用$nextTick