vue2中监听页面的缩放,在watch里面监听设置一个标签的宽度,但是没有实时更新
时间: 2024-10-17 21:12:24 浏览: 9
在 Vue2 中监听页面缩放事件并动态调整元素宽度,通常需要使用 `window.addEventListener` 来捕获窗口大小变化(例如,当用户滚动或调整浏览器视口缩放时)。要在 watch 容器中实时响应这种改变,你可以尝试以下步骤:
1. 首先,在你的组件的 `mounted` 或 `created` 生命周期钩子里添加 window 的缩放监听器,并保存当前窗口的宽度作为状态:
```javascript
export default {
data() {
return {
originalWidth: null,
};
},
mounted() {
this.originalWidth = document.documentElement.clientWidth;
window.addEventListener('resize', this.updateWidth);
},
beforeDestroy() {
window.removeEventListener('resize', this.updateWidth); // 移除监听器以避免内存泄漏
},
};
```
2. 创建一个 `updateWidth` 方法,用于更新标签宽度,并在 watch 中监听这个状态的变化:
```javascript
methods: {
updateWidth() {
const newWidth = document.documentElement.clientWidth;
if (newWidth !== this.originalWidth) { // 检查是否真的有尺寸变化
this.$set(this, 'originalWidth', newWidth); // 使用 $set 更新原始宽度以便 watch 观察到变化
// 这里可以设置标签的宽度或其他相关的DOM操作
this.tagWidth = newWidth; // 假设 tagWidth 是你的标签宽度属性名
}
},
},
watch: {
originalWidth(newWidth, oldWidth) {
if (newWidth !== oldWidth) {
this.updateTagWidth(); // 调用实际更新标签宽度的方法
}
},
},
```
在这个例子中,如果标签宽度发生变化,`updateWidth` 方法会被触发,然后更新 `originalWidth` 数据,进而触发 watch 监听器。记得检查 `newWidth` 是否确实改变了,防止无谓的计算。
阅读全文