脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3动态监听浏览器窗口

vue3动态监听浏览器窗口变化实例

 更新时间：2023年07月04日 08:33:55   作者：more名奇妙  
这篇文章主要给大家介绍了关于vue3动态监听浏览器窗口变化的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下

定义一个属性记录宽度

const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)

在 vue mounted 的时候 去挂载一下 window.onresize 方法

  onMounted(() => {
      window.onresize = () => {
        return (() => {
          screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        })()
      }
    })

去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth

 watch(() => screenWidth, (val) => {
      screenWidth.value = val
    })

这样screenWidth就跟随浏览器的窗口大小动态变化了

进行使用

    const programHaplomultiple = computed(() => {
      return (screenWidth.value * 0.52) / infoContent.value.width / 320
    })

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

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

onMounted(()=>{
//监听窗口变化
window.onresize=()=>{
return(()=>{
window.screenWidth=document.body.clientWidth;
viewWidth.value=window.screenWidth;
})();
};
});
//视口宽度
const vieWith=ref(document.documentElement.clientWidth||document.body.clientWidth);

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

总结

到此这篇关于vue3动态监听浏览器窗口变化的文章就介绍到这了,更多相关vue3动态监听浏览器窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论