适用于 表格宽度自适应 echarts 宽高计算等
1、引入插件element-resize-detector
npm install element-resize-detector
2、(1)main.js全局引入
import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()
2、(2)使用页面引入
import ElementResizeDetectorMaker from "element-resize-detector"
<template>
<div ref="wrapper" class="test-page" />
</template>
<script>
import ElementResizeDetectorMaker from 'element-resize-detector';
const erd = ElementResizeDetectorMaker();
export default {
name: 'TestPage',
data() {
return {
nameWidth: 100
};
},
mounted() {
this.$nextTick(() => {
erd.listenTo(this.$refs.wrapper, (ele) => {
console.log('=======offsetWidth', ele.offsetWidth);
console.log('=======offsetHeight', ele.offsetHeight);
console.log('=======clientWidth', ele.clientWidth);
this.nameWidth = ele.clientWidth;
//...元素尺寸变化调用其他方法
// this.resize()
});
});
},
beforeDestroy() {
erd.uninstall(this.$refs.wrapper);
}
};
</script>
页面销毁时
beforeDestroy, 记得要卸载
