vue中使用element-resize-detector
1,安装
npm install element-resize-detector --save
2.使用
引入工具包在组件中使用或者在单独的js中使用
import resizeDetector from 'element-resize-detector'
如图,当浏览器窗口发生变化时,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector
3.实际中的应用
const elementResizeDetectorMaker = require("element-resize-detector");let erd = elementResizeDetectorMaker();erd.listenTo(this.$refs.lineChart, () => {this.$nextTick(function () {const lineChart = this.$echarts.init(this.$refs.lineChart);//使echarts尺寸重置lineChart.resize();});
});
4.从元素中移除侦听器
RemoveListener(element,listener)
从元素中移除所有侦听器,但不完全删除检测器。如果以后可能会添加侦听器,并且不希望检测器再次初始化,请使用此函数
uninstall(element)
最后
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 !
免费获取源码地址:http://www.crmeb.com
PHP学习手册:https://doc.crmeb.com
技术交流论坛:https://q.crmeb.com
vue中使用element-resize-detector相关推荐
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- vue中实现element的Popper功能
<template><div class="pop-over"><a @click="toggleOpen" class=&quo ...
- php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
- Element组件引发的Vue中mixins使用,写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
- 在vue项目中引入element,并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
- vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...
- 在 vue 中使用 window.onresize及div的resize事件
项目场景: 如何在 vue 中使用 window.onresize 如何避免 覆盖其它的 window.onresize 手动触发 window.onresize echarts 监听图表容器的大小并 ...
- 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能 实现效果: 2.1 下 ...
- vue中使用echart地图
vue中使用echart地图 获取湖南的地图数据 实现的效果 步骤 一些方法 地图options 总结 获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
- VUE中使用Echarts绘制地图迁移
踩坑说明 很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
最新文章
- (5.0) Tomcat 8 源码, 初始化 bootstrap
- java 异步 web_Java web spring异步方法实现步骤解析
- python scatter参数详解_matplotlib.pyplot.scatter散点图结构及用法||参数详解
- 西门子滚筒洗衣机教程_西门子洗衣机怎么样 西门子洗衣机哪款好
- algorithm头文件下的sort()
- 1. golang 接入Discord做消息推送
- Java Web J2EE下的两大框架SSH和SSM对比
- vue 跳转到选项卡_使用 DevTools 新增的 Issues 选项卡发现网页问题
- Java——设计模式(装饰模式_IO)
- 将<span>标签设为圆形
- SPSS回归分析案例
- python——设计一个简单的购房商贷月供计算器
- 零基础入门数据挖掘,看完这份详细的学习指南就够了!(附资料)
- 【从零搭建后端基础设施系列(九)】-- VM容器化
- 清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
- 联想电脑ctrl + r 快捷键无法使用
- Mac系统下Carina初体验
- 初学者-CSS思维导图(下)
- evo评测VINS-MONO---代码修改、数据格式转换、数据测试
- 程序员拒绝PM小姐姐需求的 4 大理由!
热门文章
- Vue 表格循环滚动,鼠标移入暂停,移出继续滚动
- 用CocosCreator来做一个黄金矿工吧(一)
- iPhone续航崩溃 30分钟掉电50%!太惨了
- android 8 续航 评测,续航对比测试:iPhone 11 Pro Max续航超越安卓旗舰
- Matlab 2012a 函数句柄的理解和用法
- PHP_PHP操作Excel-SimpleExcel.php
- 用邻接表存储图c语言,邻接表、邻接多重表、十字链表及C语言实现
- iframe内嵌文件去除打印,下载功能
- 异步编程的方式有哪几种?
- SpringBoot整合Knife4j问题