Vue 实时监听窗口变化 windowresize的两种方法
程序员文章站
2022-06-11 14:42:46
下面给大家分享两种方法来介绍vue 实时监听窗口变化 windowresize,具体内容如下所示:
方法一:
first-step : 定义变量
data()...
下面给大家分享两种方法来介绍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(); },
完全可以做到检测窗口变化
总结
以上所述是小编给大家介绍的vue 实时监听窗口变化 windowresize的两种方法,希望对大家有所帮助
上一篇: 详解JSP