今天工作中有个需求是,在一个弹出框里放Echarts
图表。众所周知Vue里是在mounted
生命周期里才能获取到DOM,于是我理所应当的:
mounted() {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
}
报错,找不到DOM,无法生成echarts。但mounted里不应该发生这种情况的,所以只有一种可能性:那就是el-dialog和v-if一样,采用默认不生成DOM的方式,只有在弹框出现时才会生成。知道了问题所在,就好解决了:
// 弹框的触发事件
showDialog() {
this.isDialogShow = true;
this.$nextTick(() => {
let diameter= document.getElementById("diameter");
let diameterOption = {...};
echarts.init(diameter).setOption(diameterOption);
})
}
注意一定要在控制dialog的布尔值变为true
后调用nextTick
,这样就能顺利获取到DOM啦~