vue中window.onresize的使用解析

目录
  • window.onresize的使用
    • 说下重点
  • window.onresize笔记
    • 1.浏览器尺寸变化响应事件
    • 2.谷歌浏览器中
    • 3.页面尺寸变更事件

window.onresize的使用

说下重点

window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况，所以我的解决方案是在App.vue中使用，获取document.documentElement.clientWidth（即浏览器宽度）存放在vuex中，别的组件只需要用computed(计算属性)将vuex的clientWidth获取，然后通过watch监听clientWidth的值，即可触发组件事件

App.vue代码

<script>
export default {
  name: 'app',
  mounted () {
    window.onresize = () => {
      this.clientWidthResize()
    }
  },
  methods: {
    clientWidthResize () {
      this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
    }
  }
}
</script>

store中tool.js代码（此处进行模块化开发）

export default {
  namespaced: true,
  state: {
    clientWidth: 0
  },
  getters: {},
  mutations: {
    resizeWidth(state, clientWidth) {
      state.clientWidth = clientWidth;
    },
  },
  actions: {},
}

组件使用

computed: {
  clientWidth () {
    return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
  }
},
watch: {
  clientWidth (val) {
    console.log(val)
  }
},

window.onresize笔记

1.浏览器尺寸变化响应事件

 window.onresize = function(){....}

这里需要注意的是，onresize响应事件处理中，获取到的页面尺寸参数是变更后的参数。

// 获取到的是变更后的页面宽度
var currentWidth = document.body.clientWidth; 

如果需要使用到变更之前的参数，需要建一个全局变量保存之前的参数（并且记得在onresize事件中刷新这个全局变量保存新的参数值）。

2.谷歌浏览器中

window.onresize事件默认会执行两次（偶尔也会只执行一次，网上大部分说法认为这是Chrome的bug）。

解决方法：

一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次，代码如下：

var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制
 
window.onresize = function()
{
 if (firstOnResizeFire) {
  NfLayout.tabScrollerMenuAdjust(homePageWidth);
  firstOnResizeFire = false;
  
  //0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）
  setTimeout(function() {
   firstOnResizeFire = true;
        }, 500);
 } 
 homePageWidth = document.body.clientWidth; //重新保存一下新宽度
}

3.页面尺寸变更事件

注意要分为尺寸增大和尺寸变小两个方向考虑。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中的dom节点和window对象

    vue中的dom节点和window对象

    目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只

  • Vue中如何给Window对象添加方法

    目录 给Window对象添加方法 为window对象添加事件处理程序 给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下 首先在 App.vue methods 中定义一个方法 methods:{     share(){         //微信分享

  • 解决vue 给window添加和移除resize事件遇到的坑

    在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件:确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效. //之前的写法,这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ '改变窗口大小时需要做的处理' }); }, beforeDestroy() { window.removeEventListener("resi

  • vue中window.onresize的使用解析

    目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的

  • vue在mounted中window.onresize不生效问题及解决

    目录 mounted中window.onresize不生效 解决方案 window.onresize被覆盖问题 解决方案 mounted中window.onresize不生效 在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效. 解决方案 可以采用下面的方式 window.onresize = () => this.screenWidth = window.innerWidth  // 改为以下写法 window.addEv

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    目录 正文 先看一个简单的问题 内部实现 先看第一块: 再看第二块: 然后是第三块: 最后是第四块: 正文 先看一个简单的问题 <template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods:

  • vue中window.addEventListener(‘scroll‘, xx)失效的解决

    目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效

  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    目录 准备 封装 unicode引用封装 font-class引用封装 symbol引用封装 引入 全局引入 局部引入 使用 在线使用 有时候会因网络问题影响用户体验:直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护.​ 封装基于阿里巴巴图标库的项目图标. 准备 将项目内的图标下载至本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没

  • vue中的总线机制(EventBus)解析

    目录 一.EventBus的简介 二.使用方法 第一步:2种方式初始化 第二步:发送事件 第三步:接受事件 第四步:移除事件 三.全局EventBus 1.注册,在main.js中 2.在组件中使用 四.EventBus的优缺点 一.EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据. 二.使用方法 第一步:2种方式初始化 在项目

  • vue中巧用三元表达式解析

    vue中巧用三元表达式解析

    目录 如何巧用三元表达式 三元表达式的巧妙使用 :class=“ “的三元表达式写法 如何巧用三元表达式 一开始我并不喜欢阅读别人的代码,话说程序员最讨厌的事:写代码要写文档.写代码要写注释.别人的代码没有文档.别人的代码没有注释.后来发现阅读别人的代码虽然很枯燥,但是很锻炼逻辑思维,而且还能学到很多东西,比如我下面要说的这个: 三元表达式的巧妙使用 在某天(其实具体是哪天我也忘了),我在阅读别人的代码时发现一串三元表达式,感觉很6,像是打开新世界的大门一样,顿时感觉只有你想不到的,没有别人做不

  • 关于vue中对window.openner的使用指南

    目录 前言 背景 以失败告终的尝试——EventBus 救星——Window.opener 补充:vue 页面window.opener用法(在子窗体中获得父窗体的方法) 总结 参考资料 前言 先说结论:window.openner是做什么的?在vue中新窗口可以使用window.openner调用父窗口的方法.下面就来通过笔者的文章进行更详细的学习吧! 背景 最近项目中使用到了Mqtt做即时通讯的功能,需求要求主页面全局要有一个消息提示功能,当收到一条消息则小铃铛右上方显示新消息的数目,点击小

  • 在vue中created、mounted等方法使用小结

    created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值 export default { name: "draw", data(){ // 定义变量source return { source:new ol.source.Ve

随机推荐