写点什么

vue 中使用 element-resize-detector

作者:CRMEB
  • 2022 年 4 月 22 日
  • 本文字数:547 字

    阅读完需:约 2 分钟

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

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
vue中使用element-resize-detector_CRMEB_InfoQ写作社区