我目前正在将名为 w
的数据属性设置为我在 HTML 中拥有的元素的 clientWidth 值。在我安装的钩子(Hook)中看起来像这样:
data() {
return {
w: 0,
};
},
mounted() {
this.w = this.$refs.timelineProgress.clientWidth;
},
这对于初始设置 this.w
元素的 clientWidth 宽度效果很好,但我现在要做的是在 clientWidth 发生变化时更改 w
的值。这样我就可以获取元素的宽度,并在它根据设备屏幕尺寸缩小或增大时存储它,或者如果用户缩小页面或类似的东西。
非常感谢任何解决此问题的帮助。谢谢。
最佳答案
您或许可以尝试使用 created
和 unmounted
方法将窗口调整大小事件附加到您的组件。
created() {
window.addEventListener('resize', this.resizeHandler);
}
unmounted() {
window.removeEventListener('resize', this.resizeHandler);
}
methods: {
resizeHandler() {
this.w = this.$refs.timelineProgress.clientWidth;
}
}
在 resizeHandler
方法中,您还可以对状态更新进行去抖动以提高性能。
关于javascript - 每当元素 clientWidth 更改时,Vue 更新数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68409906/