vue+element项目实时监听div宽度的变化
作者：随便起的名字也被占用
这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
背景：
vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置。
本次解决采用 element-resize-detector 可以完美的解决
思路：因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不会随之改变
element提供的 element-resize-detector 可以轻松解决问题的存在
第一步：在项目中安装 element-resize-detector
npm install element-resize-detector
第二步：在项目中使用
html
<div id="test">
<div id="eChart">
</div>（1）script引入
<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
// With default options (will use the object-based approach).
var erd = elementResizeDetectorMaker();
// With the ultra fast scroll-based approach.
// This is the recommended strategy.
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll" //<- For ultra performance.
});
//监听元素size变化，触发响应事件
erd.listenTo(document.getElementById("test"), function(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Size: " + width + "x" + height);
});（2）require 引入使用，在cli项目中使用，需要用到的页面 ***.vue 引入
var elementResizeDetectorMaker = require("element-resize-detector")在mounted中启用
var erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById("test"), function (element) {
var width = element.offsetWidth
var height = element.offsetHeight
that.$nextTick(function () {
console.log("Size: " + width + "x" + height)
//使echarts尺寸重置
that.$echarts.init(document.getElementById("eChart")).resize()
})
})因为gif图为录屏所以导航栏比较卡顿，勉强看一下哦
附大GIF图压缩工具地址：https://ezgif.com/resize/ezgif-1-d76f5cf7b36f.gif
基本解决问题，有更好的方案，欢迎留言指导，谢谢
更新 自定义指令方法
directives: { // 使用局部注册指令的方式
resize: { // 指令的名称
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); // 关键
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() { // 当宽高变化时就会执行
//执行某些操作
}到此这篇关于vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件的文章就介绍到这了,更多相关vue element监听div宽度变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！