前言
前端图表经常要进行 resize 操作,一般我们会想到监听 window resize event, 但是这个事件只能监听 window 窗口大小的改变, 没有办法监听到某个div大小的改变
目前解决方案
ResizeObserver
下面是使用的例子
const resizeObserver = new ResizeObserver((enties, observer)=> {
});
const elem = document.querySelect('a');
resizeObserver.observer(elem);
ResizeObserver 有兼容问题,但是我们可以用 resize-observer-polyfill
npm install resize-observer-polyfill --save
yarn add resize-observer-polyfill --save
下面看一个完整的例子 echart.vue
<template>
<div class="chart-container" ref="chart"></div>
</template>
<script>
import Vue from 'vue';
import ResizeObserver from 'resize-observer-polyfill';
import throttle from 'lodash/throttle';
const echarts = require('echarts');
Vue.prototype.$echarts = echarts;
let resizeObserver = null;
export default {
name: 'VEchart',
props: {
theme: String,
options: {
type: Object,
default() {
return null;
},
isLoading: {
type: Boolean,
default: false,
},
},
},
data() {
return {
instance: null,
};
},
watch: {
options(val) {
if (val) {
this.refresh(val);
}
},
isLoading(val) {
this.initChart();
if (val) {
this.instance.showLoading();
} else {
this.instance.hideLoading();
}
},
},
methods: {
initChart() {
this.instance = this.instance || this.$echarts.init(this.$refs.chart);
},
getInstance() {
this.initChart();
return this.instance;
},
getOption() {
return this.getInstance.getOption();
},
refresh(options, notMerge = false) {
this.initChart();
this.instance.setOption(options || this.options, notMerge);
},
bindResize() {
const deboundResize = throttle(() => {
this.instance && this.instance.resize();
}, 250);
resizeObserver = new ResizeObserver((entries, observer) => {
deboundResize();
});
resizeObserver.observe(this.$refs.chart);
},
unbindResize() {
resizeObserver.unobserve(this.$refs.chart);
},
},
mounted() {
this.bindResize();
},
beforeDestroy() {
this.unbindResize();
},
};
</script>
<style scoped></style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)