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。

vue的生命周期,以及解决el弹框重叠覆盖问题_第1张图片

你可能感兴趣的:(html)