//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- + 'px'
})
}
},
  //挂载window.onresize事件
mounted(){
let _this = this;//赋值vue的this
window.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>

注意事项:

1、window.onresize事件一般放在created或者mounted生命周期中,这样界面改变是能触发。

2、window.onresize中的this指向的是window,不是指向vue,如果需要调用methods中的函数,需要在window.onresize事件的前面把指向vue的this赋值给其他字符,比如"_this"。

3、由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在出这个界面时注销window.onresize事件。

4、window.onresize说明一个问题:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。

window.onresize事件在vue项目中的应用的更多相关文章

  1. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  2. vue项目中微信jssdk在ios签名失败

    一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...

  3. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  4. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  6. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  7. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  8. GoJS 在 vue 项目中的使用

    GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...

  9. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

随机推荐

  1. Lua中“.”调用方法与“:”调用方法的区别

    Lua中“.”调用方法与“:”调用方法的区别:                                                                             ...

  2. VS 和Visual Assist X快捷键(转)

    Visual Assist X 最有用的快捷键 1.Alt + G: 在定义与声明之间互跳. 2.Alt + O: 在.h与.cpp之间互跳.(O是字母O,不是数字零) 3.Alt + Shift + ...

  3. XE7 & FMX 那些年我们一起上过的控件:StringGrid 之(1) 自定义标题样式

    FMX下的Grid类控件似乎不太尽如人意,可能是和官方的资料没有跟得上它的发行版本有关系. 以下讨论StringGrid的列表头及对齐方式. 先上个效果图: FMX的列表头估计很多人都是用盒子上流传甚 ...

  4. Centos 7 修改默认的运行级别

    Runlevel System State 0 Halt the system 1 Single user mode 2 Basic multi user mode 3 Multi user mode ...

  5. IO--RAID

    RAID IO计算 Raid 0 –每个磁盘的I/O计算= (读+写) /磁盘个数 Raid 1 --每个磁盘的I/O计算= [读+(2*写)]/2 Raid 5 --每个磁盘的I/O计算= [读+( ...

  6. [java]基于UDP的Socket通信Demo

    java课编程作业:在老师给的demo的基础上实现客户端发送数据到服务器端,服务器端接受客户端后进行数据广播. 整体功能类似于聊天室,代码部分不是太难,但是在本机测试的时候出现这样的问题: 服务端通过 ...

  7. Navicat for MySQL打开链接时出错错误为:2005 - Unknown MySQL server host 'localhost'(0)?

    问题:Navicat for MySQL打开链接时出错错误为:2005 - Unknown MySQL server host 'localhost'(0)? 在使用navicat 连接mysql数据 ...

  8. c# 求两个数中最大的值

    1.三元运算符: class Program { static void Main(string[] args) { ,); Console.WriteLine("最大数:{0}" ...

  9. HAOI2014 遥感监测

    题目链接:戳我 比较水的一个题,直接处理点,找在直线上的可以覆盖到它的区间,然后做最小线段覆盖即可: 代码如下: #include<iostream> #include<cstdio ...

  10. “全栈2019”Java第五十二章:继承与初始化详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...