vue项目监听浏览器窗口大小发生变化触发事件

在mounted中写下:

在页面初始化时,window.onresize 来监听浏览器窗口的变化。在变化时,调用函数,或者直接写业务逻辑。


window.onresize = () => { return (() => { this.$nextTick(() => { this.headHeight(); }); })(); };

(created()的时候不行,因为此时document还没有生成)

在methods中写下:

可以使用js内置的window、document等相关函数获取页面或者盒子的尺寸。

    headHeight() {
      // 页面可视高度
      let pageInnerHeight = window.innerHeight;// 搜索框高度
      let divOffsetHeight =
        document.getElementsByClassName("divStyle")[0].offsetHeight;
console.log(pageInnerHeight, divOffsetHeight); }, },
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Ant Design Vue中,您可以使用`Vue`中提供的官方方式来监听浏览器窗口变化而不重新加载页面。下面是一个简单的示例: 首先,在您的组件中导入`Vue`和`ant-design-vue`: ```javascript import Vue from 'vue'; import { debounce } from 'ant-design-vue'; ``` 然后,您可以使用`Vue`提供的生命周期函数`mounted`来监听窗口大小变化: ```javascript mounted() { this.$nextTick(() => { window.addEventListener('resize', this.handleResize); }); }, ``` 在这个例子中,我在组件的`mounted`生命周期函数中注册了一个`resize`事件监听器,并将其与一个叫做`handleResize`的方法绑定。 接下来,您需要在组件中定义`handleResize`方法来处理窗口大小变化: ```javascript methods: { handleResize: debounce(function() { // 处理窗口大小变化的逻辑 }, 300), }, ``` 在这个例子中,我使用了`debounce`函数,它可以将频繁触发的事件缩减为一定时间内只触发一次。这样可以避免事件过于频繁地触发,提高性能。 最后,不要忘记在组件销毁时移除窗口大小变化监听: ```javascript beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, ``` 通过添加类似上述代码,在Ant Design Vue中您就可以监听浏览器窗口变化而不重新加载页面了。当窗口大小变化时,`handleResize`方法会被调用,您可以在其中添加适当的逻辑来应对窗口大小变化所带来的变化
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶糖 肥晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值