vue中监听window.resize的变化

我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同。在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化。实现的过程中各种bug,也真的让人有种想要发狂的感觉。但是还好,最后在不断的查资料和尝试当中。实现了想要的效果,仅供参考:

首先我这里实现的效果是切换echart图形,然后在window.resize过程中想要实现自适应窗口大小的变化。

这里的两个button分别是控制两个路由切换,也就是两个echart图形(柱状图和饼图)

首先实现这两个图形的option设置这里就不进行展示了,在官网上有许多的例子,可供参考。

(1)图形的container<div id=‘echart‘></div>  我把宽高设置为充满父容器。所以你需要确保你的图形容器在切换的时候要有宽高。在我的另外一篇随笔中有写到利用js实现echarts切换的时候,会涉及到当echarts的display为none的时候,再次显示之前,需要去计算并赋值给图形容器,不然图形没有宽度或者高度会导致无法展示。

(2)

在methods方法中写了一个实现柱状图的过程方法:createBar。

在挂载的时候去调用该方法,就实现了基本的图形。但是这个时候还没有涉及到当window  resize的时候,图形的大小不会跟随改变。这个时候就需要监听window.resize变化:

完整的mounted阶段。这里面使用到了jquery,需要引入jquery。具体的可以全局<script>引入,也可以把jquery当做插件进行引入<需要在webpack中配置>,网络上有许多配置的例子。

到这里就可以完成window.resize的监听并且图形可以 变化了。

或许这个方法不太优,但是不失为一种方式。如果大家有更好的实现方法当然也可以进行分享。分享使你快乐。哈哈~~

时间: 2025-01-05 06:25:10

vue中监听window.resize的变化的相关文章

vue中监听路由参数的变化

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

vue 中监听窗口发生变化,触发监听事件, window.onresize &amp;&amp; window.addEventListener(&#39;resize&#39;,fn) ,window.onresize无效的处理方式

1 // 开始这样写,不执行 2 window.onresize = function() { 3 console.log('窗口发生变化') 4 } 5 6 7 // 改成window监听事件 8 window.addEventListener('resize', function() { 9 console.log('窗口发生变化') 10 }) onresize的定义方式 一.直接在html中定义 如<body onresize="doResize()"/> 二.直接

Vue中监听窗口关闭事件并在窗口关闭前发送请求

Vue中监听窗口关闭事件并在窗口关闭前发送请求,代码如下: mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window.removeEventListener('beforeunload', e => thi

vue中监听vuex state变化,亲测可用

import {mapGetters} from 'vuex' computed: { ...mapGetters([ 'showChip' ]) }, watch: { showChip(newVal) { this.chipInState = newVal } } //试了几种方案,只有这个起效果了,记录一下. 原文地址:https://www.cnblogs.com/changlun/p/12333718.html

Vue 为什么在 HTML 中监听事件?

为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难.实际上,使用 v-on 有几个好处: 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM

vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高

1.在data中设置: 1 tableHeight:"500", 2 screenHeight:window.innerHeight, 2.在mounted中设置: 1 mounted() { 2 const that = this 3 window.onresize =() =>{ 4 return (()=>{ 5 window.screenHeight = window.innerHeight 6 this.screenHeight = window.screenHe

vue+hbuilder监听安卓返回键问题

1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min.js' Vue.prototype.$mui = mui; 在一级页面mounted时 1 this.$mui.plusReady( () =>{ 2 var backcount = 0; 3 this.$mui.back = ()=> { 4 if (this.$mui.os.ios) ret

Android 监听 Android中监听系统网络连接打开或者关闭的实现代码

本篇文章对Android中监听系统网络连接打开或者关闭的实现用实例进行了介绍.需要的朋友参考下 很简单,所以直接看代码 复制代码 代码如下: package xxx; import android.content.BroadcastReceiver;  import android.content.Context;  import android.content.Intent;  import android.net.ConnectivityManager;  import android.ne

android 监听网络状态的变化及实战

android 监听网络状态的变化及实际应用 转载请注明博客地址:http://blog.csdn.net/gdutxiaoxu/article/details/53008266 平时我们在请求错误的情况下,通常会进行处理一下,一般来说,主要分为两方面的错误 - 没有网络的错误 - 在有网络的情况下,我们客户端的错误或者服务器端的错误 今天这篇博客主要阐述以下问题 怎样监听网络状态的变化,包括是否打开WiFi,否打开数据网络,当前连接的网络是否可用 网络没有打开情况下的处理,如弹出对话框,跳转到