vue3监听窗口变化来进行页面操作

亿点不李解

已于 2023-07-17 11:08:36 修改

阅读量3.1k

点赞数

文章标签： javascript 前端开发语言

于 2022-09-28 18:15:00 首次发布

本文链接：https://blog.csdn.net/m0_71857135/article/details/127084068

版权

当需要监听窗口的宽度变化来对页面进行dom隐藏或修改时，操作如下

const timer = ref(false);

// 视口宽度
const vieWidth = ref(
  document.documentElement.clientWidth || document.body.clientWidth
);
//监听并更新视口宽度
watch(
  (vieWidth.value = () => {
    // 为了避免频繁触发导致页面卡顿，使用定时器
    if (!timer.value) {
      vieWidth.value = document.body.clientWidth;
      timer.value = true;
      setTimeout(function () {
        timer.value = false;
      }, 200);
    }
  })
);

视口宽度就可以获取到了，直接用vieWith的值就可以来判断dom的隐藏或修改啦