我正在嘗試借助 refs 在 vue 中動態獲取容器的寬度。但是，它要么回傳先前的值，要么顯示未定義。我猜我做錯了什么。我只想要動態的特定 div 的寬度。
我提到了 Vue - 動態設定組件的寬度，vuetify.js 如何獲得 v-container 的全寬和Vue - 將一個元素的寬度設定為另一個元素的寬度，但沒有運氣
const app = new Vue({
el: '#app',
mounted () {
this.screenWidth()
},
methods: {
screenWidth() {
console.log("screen", this.$refs.container?.offsetWidth);
return `${this.$refs?.container?.offsetWidth}`;
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container">
Screen {{ screenWidth() }}
</div>uj5u.com熱心網友回復：
在Vue JS - 如何在更改接受的答案時獲取視窗大小，您可以mounted()始終添加一個呼叫以獲得寬度。
const app = new Vue({
el: '#app',
data() {
return {
sWidth: null
};
},
created() {
window.addEventListener("resize", this.screenWidth);
},
mounted () {
this.screenWidth()
},
destroyed() {
window.removeEventListener("resize", this.screenWidth);
},
methods: {
screenWidth() {
this.sWidth = this.$refs.container?.offsetWidth;
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container">
screen {{ sWidth }}
</div>uj5u.com熱心網友回復：
您需要ref在模板中設定，因此請嘗試以下代碼段：
const app = new Vue({
el: '#app',
data() {
return {
sWidth: ''
}
},
mounted () {
this.screenWidth()
},
methods: {
screenWidth() {
this.sWidth = this.$refs?.container?.offsetWidth
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container">
Screen {{ sWidth }}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/438564.html
標籤：javascript Vue.js