Dialog
介紹使用 Dialog 對話框元件
Dialog 是網頁與使用者一種強烈的互動,這個元件顯示後,將會吸引使用者所有的注意力,所以一般會用在非常重要的地方,或是想讓使用者完全專心的情境之下。
基本使用
<bpa-button @click="isBpaDialogVisible = true">
Open Dialog
</bpa-button>
<bpa-dialog :visible.sync="isBpaDialogVisible">
Content
</bpa-dialog>
<bpa-dialog
:visible.sync="isBpaDialogVisible"
header="custom header text"
footer="custom footer text"
>
Content
</bpa-dialog>
<bpa-dialog
:visible.sync="isBpaDialogVisible"
>
<template v-slot:header>
<mark>custom header Html</mark>
</template>
Content
<template v-slot:footer>
<mark>custom footer Html</mark>
</template>
</bpa-dialog>
點擊外面遮罩時,不關閉對話框
<bpa-dialog :clickoutside="false">
Cotnent
</bpa-dialog>
屬性
Name
Value
Type
Default
Required
Note
Demo