BlockUI

BlockUI 可以封鎖其他組件或整個頁面。

導入 #


import BlockUI from 'primevue/blockui';

基本 #

要封鎖的元素應放置為 BlockUI 的子元素，且必須使用 blocked 屬性來控制狀態。

基本

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<div class="mb-4">
    <Button label="Block" @click="blocked = true" class="mr-2"></Button>
    <Button label="Unblock" @click="blocked = false"></Button>
</div>
<BlockUI :blocked="blocked">
    <Panel header="Basic">
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </Panel>
</BlockUI>

文件 #

啟用 fullScreen 屬性可控制文件。


<BlockUI :blocked="blocked" fullScreen />
<Button label="Block" @click="blocked = true" />

無障礙功能 #

螢幕閱讀器

當 UI 被封鎖和解除封鎖時，BlockUI 會管理 aria-busy 狀態屬性。任何有效的屬性都會傳遞到根元素，因此可以使用額外的屬性（例如 role 和 aria-live）來定義動態區域。

鍵盤支援

組件不包含任何互動式元素。