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

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

首先看图

clipboard.png
由图可知:

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

2. 要解决的问题

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

3. 解决思路

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

4. 奇怪的事情

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

    clipboard.png

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

    clipboard.png

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

    clipboard.png
    修改后

    clipboard.png

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

5. 一个事实

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

6. 一个解决方案

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

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

回答:

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

回答:

尝试下 getComputedStyle 这个方法

回答:

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

回答:

可以尝试用$nextTick

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注