Vue Element遮罩是一種用于遮擋頁面的組件，通常用于在頁面加載或顯示數據時顯示。使用遮罩，可以讓用戶知道頁面正在加載或某些操作正在進行中，從而提高用戶體驗。

在Vue Element中，我們可以通過el-loading和el-dialog組件實現遮罩效果。

import { Loading } from 'element-ui';
// 全局遮罩
Loading.service({
lock: true,
text: '加載中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 局部遮罩
export default {
data() {
return {
loading: false
};
},
methods: {
handleClick() {
this.loading = true;
setTimeout(() =>{
this.loading = false;
}, 2000);
}
}
}

在上述代碼中，我們可以看到全局遮罩和局部遮罩，兩者實現的方式有所不同。全局遮罩通過調用Loading.service方法來顯示遮罩，而局部遮罩則是通過綁定loading變量和el-loading組件來實現。 此外，我們還可以通過el-dialog組件來實現模態框的遮罩效果。當彈出模態框時，頁面上方會出現遮罩層，覆蓋住頁面，使頁面中的其他元素不可用。

<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打開 Dialog</el-button>
<el-dialog 
title="提示"
:visible.sync="dialogVisible"
width="30%"
:close-on-click-modal="false"
:show-close="false"
>
<p>這里是一段文字</p>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">知道了</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
}
};
</script>
<style>
.el-dialog__wrapper{
display: none !important; // 隱藏 dialog 的遮罩
}
</style>

在上述代碼中，我們可以看到使用el-dialog組件實現遮罩效果的細節，其中通過設置.el-dialog__wrapper的display屬性來隱藏遮罩，同時通過設置el-dialog組件的其他屬性來控制模態框的相關行為。

總而言之，Vue Element遮罩是一個實現頁面遮蓋效果的關鍵組件，能夠提升用戶體驗，使頁面加載或數據載入更加自然，使用戶更舒適便利地操作頁面。