vue的生命周期,以及解决el弹框重叠覆盖问题

		var vm = new Vue({
			el : '#app-5',
			data : {
				message : 'hello world'
			},
			methods : {
				methodDemo : function() {
					var _this = this;
					_this.message = 'hello world methods demo';
					setTimeout(function() {
						_this.$message.success(_this.message);
					}, 1);
				}
			},
			beforeCreate : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件创建前")
				}, 1);
			},
			created : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件创建完成");
				}, 1);
				this.methodDemo();
			},
			beforeMount : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("模板编译之前,还没挂载");
				}, 1);
			},
			mounted : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("模板编译之后,已挂载,页面上存在数据展示");
				}, 1);
			},

			beforeUpdate : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件更新之前");
				}, 1);
			},
			updated : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件更新成功");
				}, 1);
			},
			beforeDestory : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件销毁之前");
				}, 1);
			},
			destoryed : function() {
				var _this = this;
				setTimeout(function() {
					_this.$message.success("组件销毁");
				}, 1);
			}
		})

上面是vue的生命周期,弹框中发现一个问题,在单独使用this.$message.success("成功弹框信息")时,多条弹框会出现重叠覆盖,只显示最后一条信息的现象,所以使用定时器setTimeout可以解决这个问题,因为源码中el调用的过程中存在并发问题,所以以此提供时间,让其稍等一下以便就可以给el重新计算高度的时间,第二个弹框就可以拿到正确的偏移高度了。定时器的时间单位是毫秒级别的,即1000ms=1s。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值