解决方案

第一步：通过npm install element-resize-detector获取elementResizeDetectorMaker

npm install element-resize-detector

第二步：将依赖引入import elementResizeDetectorMaker from ‘element-resize-detector’

import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()

第三步：使用

          this.$erd.listenTo(document.getElementById("chinaMapChart"), (element)=>{this.resize()})

如果不使用Lambda表达式作为监听器，会出现不能获取data和methods的情况，具体原因参考JavaScript高级教程

解决方案：
let that = this;
this.$erd.listenTo(document.getElementById("bar"), function (element) {that.$nextTick(function () {//使echarts尺寸重置that.myEcharts.resize();})
})//监听元素变化

参考文章

vue 监听某个容器大小变化（饼状图适应容器大小变化）

Vue——全局element-resize-detector监听DOM元素相关推荐

Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
vue监听dom元素变化修改echar图表
文章目录前言一.install监听依赖二.使用步骤 1.监听指定id并修改echarts宽高监听Windows窗口变化前言提示:这里可以添加本文要记录的大概内容: vue中监听dom元素变 ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
vue让元素固定_vue 监听dom元素的滚动事件实现某元素吸顶或者固定位置显示
孤单的是人,寂寞的是心. 这只是我写的一个简单的demo,但是所需数据与逻辑已走通, 拿走就能用的那种,希望你能看完区域价格房型更多更多更多更多更多更多更多更多更多更多更多 ...
js/Jquery通过MutationObserver实现监听dom元素的属性变化用div简单实例
图片实例
vue之监听DOM事件
在vue中也有监听DOM事件,比如这样一个场景,我们输完一个名字之后点击一个按钮获取一个花名,或者牛X的名字代码如下: 代码中:@click可写成v-on:click,不同的写法. 页面效果如下执行 ...
vue中的v-on事件监听机制
监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义简写: @事件类型="一个函数"⭐ 1.作用:绑定事件监听,表达式可 ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...

Vue——全局element-resize-detector监听DOM元素

解决方案

参考文章

Vue——全局element-resize-detector监听DOM元素相关推荐

最新文章

热门文章