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
id		String	random
header	{ text } or template	String
footer	{ text } or template	String
visible		Boolean	false
clickoutside		Boolean	true

Demo