<br />
## 默認彈出框
`通過 v-model 綁定當前彈出框顯示或隱藏,默認情況下隱藏。@cancel為取消事件回調,@confirm為確認事件回調。`
```
<hd-dialog v-model="show" @cancel="show = false" @confirm="show = false">
<h1>內容1</h1>
<h1>內容2</h1>
<h1>內容3</h1>
<h1>內容4</h1>
<h1>內容5</h1>
</hd-dialog>
```
```
export default {
data () {
return {
show:true,
};
},
};
```
<br />
## 單按鈕彈出框
`通過 singleButton 屬性,用于是否展示取消按鈕,默認為true`
```
<hd-dialog v-model="show" :singleButton="false" @cancel="show = false" @confirm="show = false">
<h1>內容1</h1>
<h1>內容2</h1>
<h1>內容3</h1>
<h1>內容4</h1>
<h1>內容5</h1>
</hd-dialog>
```
```
export default {
data () {
return {
show:true,
};
},
};
```
<br />
### props
|屬性名|說明|類型|默認參數|
| --- | --- | --- | --- |
|v-model|是否顯示彈出框|Boolean|`-`|
|cancelText|取消按鈕文本|String|`取消`|
|confirmText|確認按鈕文本|String|`確認`|
|singleButton|是否展示取消按鈕|Boolean|`true`|
|confirmColor|確認按鈕文字顏色|String|`#da0000`|
<br />
### Events
|事件名|說明|回調參數|
| --- | --- | --- |
|cancel|點擊取消按鈕的回調函數|`-`|
|confirm|點擊確認按鈕的回調函數|`-`|