Dialog

Dialog 是網頁與使用者一種強烈的互動，這個元件顯示後，將會吸引使用者所有的注意力，所以一般會用在非常重要的地方，或是想讓使用者完全專心的情境之下。

<bpa-button 
	@click="isBpaDialogVisible = true"
>
	Open Dialog
</bpa-button>

<bpa-dialog 
	:visible.sync="isBpaDialogVisible"
>
	Content
</bpa-dialog>

<!-- option 1 -->
<bpa-dialog
  :visible.sync="isBpaDialogVisible"
  header="custom header text"
	footer="custom footer text"
>
  Content
</bpa-dialog>

<!-- option 2 -->
<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>

名稱	Value	Type	Default Value	Required	描述
id		String	隨機
visiable		Boolean	false
clickoutside		Boolean	false		click outside mask to close dialog or not
header	{ text } or template	String	false
footer	{ text } or template	String