1.基础方法(必须)
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args)
{
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
2.mounted中执行:
this.$_resizeHandler = debounce(function () {
// chart为echarts注入实例,例如:
// chart= echarts.init(this.$el);
if (chart) {
chart.resize()
}
},
100
)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
3.beforeDestroy中执行:
beforeDestroy() {
// 屏幕宽度自适应部分
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
}
4.activated中执行:
activated() {
// 屏幕宽度自适应部分
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
}
5.deactivated中执行:
deactivated() {
// 屏幕宽度自适应部分
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
}
6.methods中定义方法并执行
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
如果在Vue.js项目中、图表过多且各图表均为组件,可将伸缩自适应方法集成至mixins方法中,并在各组件中引入mixins。