vue+Element实现loading效果

loading效果

指令方式

// html中, 通过设置fullscreenLoading的状态来开启和关闭loading效果，可以在css中设置背景色的透明度
<el-button @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button>
// data
data() {
	fullscreenLoading: false
}
//script
openFullScreen1() {
			this.fullscreenLoading = true;
			setTimeout(() => {
				this.fullscreenLoading = false;
			}, 2000);
		},
// css 
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.1) ;
}

服务方式

//html
<el-button type="primary" @click="openFullScreen2">
			服务方式
</el-button>
// script
openFullScreen2() {
				const loading = this.$loading({
					lock: true,
					text: '拼命加载中',// 修改显示文字
					spinner: 'el-icon-loading',//可以设置图标
					background: 'rgba(255, 255, 255, 0.9)'
				});
				setTimeout(() => {
					loading.close();
				}, 2000);
			},

下载外部插件

安装插件 npm install vue-element-loading --save

// 引用
import VueElementLoading from 'vue-element-loading'
components: {
			VueElementLoading
		},
// html
<vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#FF6700" />
<el-button @click="toLoad">加载</el-button>
// data
data() {
	isActive: false,
}
// script
// 开启加载，设置时间关闭加载， 可以设置color改变图标的颜色
toLoad() {
				this.isActive = true
				setTimeout(() => {
					this.isActive = false
				}, 2000);
				console.log(this.isActive)
			},

效果：