Vue 实时监听窗口变化 windowresize的两种方法

下面给大家分享两种方法来介绍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的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 浅谈VUE监听窗口变化事件的问题

    Vuejs 本身就是一个 MVVM 的框架.但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个记录宽

  • vuejs中监听窗口关闭和窗口刷新事件的方法

    1.使用window.onunload之类的API window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2.在生命周期钩子中注册监听事件 methods: { beforeun

  • Vue 实时监听窗口变化 windowresize的两种方法

    下面给大家分享两种方法来介绍Vue 实时监听窗口变化 windowresize,具体内容如下所示: 方法一: First-step : 定义变量 data(){ return{ formLabelWidth : '123px' } }, Second-step:   根据生命周期 在mounted 中绑定 窗口变化 mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth

  • AngularJS监听ng-repeat渲染完成的两种方法

    本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法.分享给大家供大家参考,具体如下: 监听ng-repeat渲染完成有两种方法 一.最实用的方法: <ul class="pprt_content"> <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render

  • vue 监听窗口变化对页面部分元素重新渲染操作

    问题 在处理页面重新渲染时通常的做法是: 用vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 使用 v-if 重新渲染部分组件或容器 需要重新渲染的内容 <div v-if="render"> ... </div> vue 监听窗口大小发生改变 使用 window.addEventListener() 添加 resize 事件监听窗口变化

  • VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html <!-- 监听ref距离顶部高度 --> <div ref="pronbit"> <div>今日热门</div> <div>今日热销</div> </div> .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, methods: { handleScrollx() { cons

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • elementUi vue el-radio 监听选中变化的实例代码

    elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad

  • Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求

    网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed(

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

随机推荐