vue+elementui的this.$loading遮罩使用
在Vue中使用Element UI的this.$loading来实现页面加载时的遮罩效果非常简单。以下是一个简单的示例：
<template>
<div>
<el-button @click="showLoading">显示加载遮罩</el-button>
</div>
</template>
<script>
export default {
methods: {
showLoading() {
const loading = this.$loading({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close(); // 加载完毕后关闭遮罩
}, 3000);
}
}
}
</script>在这个例子中，当点击按钮时，会调用showLoading方法，该方法创建一个遮罩，并在3秒后关闭。this.$loading接受一个对象作为参数，可以设置锁定屏幕、显示的文本、背景颜色等属性。通过返回的loading变量，可以手动关闭遮罩。
评论已关闭