在el-dialog中无法正确获取DOM的问题

今天工作中有个需求是,在一个弹出框里放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啦~
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值