问题描述:
当侧边栏收缩后,内容区会变宽,因此echarts需要随之变宽
问题分析:
问题难点在于因为内容区变宽了,但是内容区的内容宽度比例没有变,我们没法通过mutationobserver对元素进行监视,因此我们需要找到一触发条件,来触发echarts自身的resize方法。
解决方法:
我们可以借鉴vue-element-admin中的方法,通过transitionend方法,检测侧边栏的transition,当过渡发生并完成后,触发该事件,在该事件中再触发echarts的resize方法
代码
我们可以将这个过程提取成mixins
/*
mixins/resize.js
*/
export default {
data() {
return {
_aside: null,
_onResize: null,
};
},
mounted() {
// this问题必须使用箭头函数
this._onResize = () => {
if (this.mychar) {
this.mychar.resize();
}
};
this.$_initResizeEvent();
this.$_initSidebarResizeEvent();
},
beforeDestroy() {
this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent();
},
methods: {
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this._onResize();
}
},
$_initResizeEvent() {
window.addEventListener('resize', this._onResize);
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this._onResize);
},
$_initSidebarResizeEvent() {
// 给侧边栏添加transitionend事件
this._aside = document.querySelector('.aside');
this._aside &&
this._aside.addEventListener(
'transitionend',
this.$_sidebarResizeHandler
);
},
$_destroySidebarResizeEvent() {
this._aside &&
this._aside.removeEventListener(
'transitionend',
this.$_sidebarResizeHandler
);
},
},
};
作者:Mdd
链接:https://juejin.cn/post/7195845066887708728
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。