Vue 实时监听窗口变化 windowresize

方法一:

First-step : 定义变量

data(){
    return{
          formLabelWidth : '123px'
    }
},

Second-step:   根据生命周期 在mounted 中绑定 窗口变化

 mounted(){
              const that = this
              window.onresize = () => {
                  return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                 })()
              }
 },

Third-step:   绑定监听 watch

 watch: {
              screenWidth (val) {
                        if (!this.timer) {
                            this.screenWidth = val
                            this.timer = true
                            let that = this
                            setTimeout(function () {
                                // that.screenWidth = that.$store.state.canvasWidth
                                console.log(that.screenWidth)
                                // that.init()
                                that.timer = false
                            }, 400)
                        }
              }
  },

方法二:在vue.2x里面时候,mounted 里面可以直接挂载 window.onresize事件。全局监听

 mounted(){

              window.onresize = () => {
                  return (() => {
                      this.handleLableWidth();
                 })()
              }
              this.handleLableWidth();

},

完全可以做到检测窗口变化

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值