首页 > 其他分享 >Vue进阶(贰零零):window.onresize事件在vue项目中的应用

Vue进阶(贰零零):window.onresize事件在vue项目中的应用

时间:2023-06-23 17:01:10浏览次数:48  
标签:vue 进阶 onresize methods window Vue 事件 echart

属性

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的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中销毁掉。

标签:vue,进阶,onresize,methods,window,Vue,事件,echart
From: https://blog.51cto.com/shq5785/6538416

相关文章

  • Vue.js 过渡和动画
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • 强化学习从基础到进阶-常见问题和面试必知必答[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛
    强化学习从基础到进阶-常见问题和面试必知必答[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛策略、时序差分等以及Qlearning项目实战1.核心词汇概率函数和奖励函数:概率函数定量地表达状态转移的概率,其可以表现环境的随机性。但是实际上,我们经常处于一个未知的环境中,即概率函数和奖励......
  • 强化学习从基础到进阶-案例与实践[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛策略、时序差
    强化学习从基础到进阶-案例与实践[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛策略、时序差分等以及Qlearning项目实战策略最简单的表示是查找表(look-uptable),即表格型策略(tabularpolicy)。使用查找表的强化学习方法称为表格型方法(tabularmethod),如蒙特卡洛、Q学习和Sarsa。本章通过最......
  • 强化学习从基础到进阶-常见问题和面试必知必答[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛
    强化学习从基础到进阶-常见问题和面试必知必答[3]:表格型方法:Sarsa、Qlearning;蒙特卡洛策略、时序差分等以及Qlearning项目实战1.核心词汇概率函数和奖励函数:概率函数定量地表达状态转移的概率,其可以表现环境的随机性。但是实际上,我们经常处于一个未知的环境中,即概率函数和奖励......
  • Vue(四):el和data的两种写法
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>el和data的两种写法</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body......
  • Vue(五):Vue中的MVVM
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue中的MVVM</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body>......
  • Vue前端权限管理
    一、登录权限控制实现哪些页面能被未登录的用户访问,哪些页面只有用户登录后才能被访问1、实现:在路由对象中以添加meta的方式去实现登录页面权限控制需要登录才能显示的页面设置meta.need_login属性export const routes = [      {         p......
  • 超级详细的Vue安装与配置教程
    超级详细的Vue安装与配置教程目录一、下载和安装Vue二、创建全局安装目录和缓存日志目录三、配置环境变量1.环境变量---用户变量---选中Path---点编辑2.环境变量---系统变量---新建三、安装vue1.安装vue.js2.安装webpack模板3.安装脚手架vue-cli......
  • 前端Vue自定义导航栏菜单 定制左侧导航菜单按钮 中部logo图标 右侧导航菜单按钮
    前端Vue自定义导航栏菜单定制左侧导航菜单按钮中部logo图标右侧导航菜单按钮,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13152效果图如下:cc-navHeader使用方法在page.json设置{"path":"pages/index/index","style":{"nav......
  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图
    前端Vue自定义简单实用轮播图封装组件快速实现轮播图,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13153效果图如下:cc-mySwiper使用方法<!--自定义轮播图swiperArr:轮播数组 @swiperItemClick:轮播图条目点击--><cc-mySwiper:swi......