我試圖讓我的畫布適合它的容器，在一個 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>
uj5u.com熱心網友回復：
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();
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342587.html
標籤：javascript css Vue.js html5-canvas
上一篇：JSONhtml字串到新頁面
下一篇：vue-插值html值