响应式画布 vuejs

Question

我正在尝试使我的画布适合它的容器，在一个 vue 组件中。 我在挂载时触发 resizeCanvas()，但容器的高度和宽度为 0。 如何拥有适合其容器的画布，以便我可以使用 css 更改容器大小并更新画布？ （对不起我的英语，我不流利）

<template lang="html">
  <div class="container" ref="container">
    <canvas ref="canvas" :width="width" :height="height"></canvas>
  </div>
</template>

<script>

export default {
  name: "monster",
  data ()
  {
    return {
      width: 512,
      height: 512
    }
  }
  methods: {
    resizeCanvas(){
      console.log(this.$refs.container.offsetWidth); // logs 0
      this.width = this.$refs.container.offsetWidth
      this.height = this.$refs.container.offsetWidth
    }
  },
  mounted ()
  {
    console.log(this.$refs.container.offsetWidth) // logs 0
    window.addEventListener("resize", this.resizeCanvas);
    this.resizeCanvas()  
  },
  unmounted() {
    window.removeEventListener("resize", this.resizeCanvas);
  },
}
</script>

<style lang="css" scoped>
.container {
  width: 100%; height: 100%
}
</style>

Answer 1

VueJS 中的挂载生命周期钩子并不能保证 DOM 已准备就绪：您需要等待 this.$nextTick()，然后检查容器元素的尺寸。

你可以把逻辑移到nextTick的回调中，即：

mounted () {
    this.$nextTick(() => {
        console.log(this.$refs.container.offsetWidth);
        window.addEventListener("resize", this.resizeCanvas);
        this.resizeCanvas();
    });
},

如果你熟悉 async/await 的做事方式，那么你也可以这样做：

async mounted () {
    await this.$nextTick();

    console.log(this.$refs.container.offsetWidth);
    window.addEventListener("resize", this.resizeCanvas);
    this.resizeCanvas();
},

另一种可能性是将这个“等待 DOM 准备好”的职责委托给 resizeCanvas 函数，这样您就可以完全抽象和分离关注点：

methods: {
    async resizeCanvas(){
      await this.$nextTick();
      
      this.width = this.$refs.container.offsetWidth
      this.height = this.$refs.container.offsetWidth
    }
},
mounted () {
    window.addEventListener("resize", this.resizeCanvas);
    this.resizeCanvas();
},