vue blockui 是一個 Vue.js 插件，用于在用戶交互時創建和管理頁面加載和進度指示器。它提供了一種簡單而自定義的方法來防止用戶對頁面的快速重復點擊。通過使用 vue blockui，您可以讓您的用戶感受到更好的用戶體驗，減少頁面的請求，提高網站的性能。

下面是一個非常簡單的 vue blockui 示例。

import blockUI from 'vue-blockui';
export default {
components: {
blockUI,
},
data() {
return {
isLoading: false,
};
},
methods: {
fetchData() {
this.isLoading = true;
axios.get('/api/data').then(response =>{
//  Process data response
this.isLoading = false;
});
},
},
};

該示例中我們引入了 vue-blockui 組件，將其注冊成局部組件，然后添加了isLoading狀態來管理組件的顯示和隱藏。接下來我們創建了fetchData()方法，該方法通過發送 ajax 請求來獲取數據。在請求發送期間，我們將isLoading設置為 true，并在請求成功或出現錯誤后將其設置為 false，以便加載指示器消失。

最后，我們將blockUI組件添加到模板中，并使用 v-if 指令來控制其顯示和隱藏。如果isLoading是 true，則加載指示器會顯示，否則不會顯示。

如您所見，vue blockui 插件可以使頁面加載和進度指示器的集成非常容易。該插件還為您提供了自定義選項，您可以使用message和overlayCSS屬性來設置加載指示器的消息和樣式。