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）来定义活动区域。
组件不包含任何交互式元素。