Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用

属性

window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。

在窗口大小改变之后,就会触发resize事件.

//vue页面
<template><div id='echart'>报表</div>
</template><script>export default {data() {return {};},methods: {pageResize(){this.$nextTick(()=>{var echart = document.getElementById('echart');echart.style.height = document.documentElement.offsetHeight-220 + 'px'})}},//挂载window.onresize事件mounted(){let _this = this;//赋值vue的thiswindow.onresize = ()=>{//调用methods中的事件_this.pageResize();}},//注销window.onresize事件destroyed(){window.onresize = null;}}
</script>
<style lang="scss">
#echart{background-color: #fff;border-radius: 4px;padding: 20px;min-height: 400px;
}
</style>

注意事项：

window.onresize事件一般放在created或者mounted生命周期中，这样界面改变时能触发。
window.onresize中的this指向的是window，不是指向vue，如果需要调用methods中的函数，需要在window.onresize事件的前面把指向vue的this赋值给其他字符，比如"_this"。
由于window.onresize是全局事件，在其他页面改变界面时也会执行，这样可能会出现问题，需要在出这个界面时注销window.onresize事件。
window.onresize说明一个问题：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。

Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用相关推荐

vue、Layout 布局、Layout 属性事件、vue Layout 全部布局、vue Layout 全部属性事件
vue.Layout 布局.Layout 属性事件.vue Layout 全部布局.vue Layout 全部属性事件设计规则尺寸交互视觉组件概述代码演示 1.基本结构 2.自定义触发器 ...
前端学习（1874）vue之电商管理系统电商系统之处理项目中eslint语法报错
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
在 vue 中使用 window.onresize及div的resize事件
项目场景: 如何在 vue 中使用 window.onresize 如何避免覆盖其它的 window.onresize 手动触发 window.onresize echarts 监听图表容器的大小并 ...
Vue进阶（幺捌柒）：vue项目build报错的解决办法（ERROR in static/js/***.js from UglifyJs）
文章目录一.前言二.问题分析三.问题解决四.拓展阅读一.前言 Vue项目编译过程中,出现如下错误信息: ERROR in static/js/vendor.f1c68aa2d5e85847d ...
Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决
文章目录一.前言二.问题分析三.解决方法四.拓展阅读一.前言在前期博文<Vue进阶(六十四):iframe更改src后页面未刷新问题解决>中讲解了iframe更改src后页面未 ...
window.onresize的详细使用
最近做的项目老是涉及到大小屏切换,但是因为屏幕宽高不一样的原因,老是要计算表格高度 window.onresize:监听window窗口变化,当窗口大小发生变化时,会触发此事件含义 MDN中的定义是 ...
Vue 进阶系列丨vuex持久化
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...

Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用

属性

Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用相关推荐

最新文章

热门文章