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的监听并且图形可以 变化了。
或许这个方法不太优,但是不失为一种方式。如果大家有更好的实现方法当然也可以进行分享。分享使你快乐。哈哈~~
vue中监听window.resize的变化的更多相关文章
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- VueJs 监听 window.resize 方法
Vuejs 本身就是一个 MVVM 的框架. 但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize 恩,我做之前也是百度了一下.看到大家伙都为这个 ...
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
- 如何在vue中监听scroll,从而实现滑动加载更多
首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底. ...
随机推荐
- postgresql-tps
tps TPS就是每秒事务数,但是事务是基于虚拟用户数的,假如1个虚拟用户在1秒内完成1笔事务,那么TPS明显就是1:如果 某笔业务响应时间是1ms,那么1个用户在1秒内能完成1000笔事务,TPS就 ...
- jquery中的ajax请求,阻塞ui线程的解决方案(自己总结的demo)
/*****************************************************/ function getAjaxData(url,data){ showLoading( ...
- MyEclipse 编写 JSP 代码时很卡的解决办法
在网上看到很多方法,都是尝试过,个人感觉都没有说到重点,所以收效甚微. 后来自己总结了一下: 我们都是习惯在MyEclipse 工具,双击jsp 文件打开进行编辑.这时,工具会打开窗口的 Previe ...
- idea 没有智能提示
开发工具要对源码产生提示,现在比较流行的是使用 .d.ts 文件 来编写提示消息 以下的解决办法不是根本之道,估计是开发工具有什么地方可以设置 自动下载 .d.ts 文件,知道的读者还请留言赐教~ 使 ...
- windows系统numpy的下载与安装教程
numpy是一款基于python的功能强大的科学计算包.要安装numpy首先你得先安装python.python的安装非常简单,本人安装的是python3.4. 工具/原料 安装好的python程序 ...
- 全网最详细的Sublime Text 3的激活(图文详解)
不多说,直接上干货! 前期博客 全网最详细的Windows里下载与安装Sublime Text *(图文详解) ZYNGA INC. User License EA7E- 927BA117 84C93 ...
- Linux系统基础知识整理
一.说明 本篇文章,我将结合自己的实践以及简介,来对linux系统做一个直观清晰的介绍,使得哪些刚接触Linux的小伙伴可以快速入门,也方便自己以后进行复习查阅. 二.基本知识整理 1.Linux文件 ...
- List集合中的对象按照某个字段去重实现
package com.liying.banana.user; import java.util.ArrayList; import java.util.Comparator; import java ...
- ubuntu 下配置elasticSearch
配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件 tar –xzvf 文件.tar.gz Vim /etc/source 添加配 ...
- dhcp服务器(一)
DHCP服务概述: 名称:DHCP -Dynamic Host Configuration Protocol动态主机配置协议. 功能:DHCP(Dynamic Host Configuration P ...