前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中使用element-resize-detector

vue中使用element-resize-detector

原创
作者头像
CRMEB商城源码
发布2022-04-22 10:31:03
9030
发布2022-04-22 10:31:03
举报
文章被收录于专栏:crmebcrmeb

1,安装

代码语言:javascript
复制
npm install element-resize-detector --save

2.使用 引入工具包在组件中使用或者在单独的js中使用

代码语言:javascript
复制
import resizeDetector from 'element-resize-detector'

如图,当浏览器窗口发生变化时,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector

3.实际中的应用

代码语言:javascript
复制
  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.从元素中移除侦听器

代码语言:javascript
复制
RemoveListener(element,listener)

从元素中移除所有侦听器,但不完全删除检测器。如果以后可能会添加侦听器,并且不希望检测器再次初始化,请使用此函数

代码语言:javascript
复制
uninstall(element)

最后

如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 !

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档