## **dialog弹框（移动端）**
1.dialog 组件支持函数调用和组件调用两种形式
~~~
import { Dialog } from 'mui'; //引入dialog
Vue.use(Dialog);
~~~
调用方式：
#### **一、弹框提示**
用于提示一些消息，只包含一个确认按钮
```js
Dialog.alert({
title: '标题',
content: '成功'，
type: 'success'，
confirm() { // 成功回调方式一
console.log('success callback')
}
})
```
#### **二、弹框确认**
用于确认消息，包含取消和确认按钮
```js
Dialog.confirm({
title: '我我我',
content: 'ahahahhah',
type: 'success',
confirmButtonText: '确定',
cancelButtomText： ''
cancel() { // cancel 回调方式二
console.log('cancel success');
},
confirm() { // confrim 回调方式二
console.log('confrim success');
},
})
```
#### **三、全局方法**
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法.
```js
this.$abcDialog.confirm({
title: '我我我',
content: 'ahahahhah',
type: 'success',
}).then(() => { // cancel 回调方式一
console.log('cancel success'');
}).catch(() => { // confrim 回调方式一
console.log('confrim success');
});
```
或者
```js
this.$abcDialog.alert({
title: '标题',
content: '成功'，
type: 'success'
}).then(()=> {// 成功回调方式二
console.log('success callback')
})
```
#### **方法：**
| 方法名 | 参数 | 返回值 | 介绍 |
| --- | --- | --- | --- | --- |
| Dialog | options | Promise | 展示弹窗 |
| Dialog.alert | options | Promise | 展示消息提示弹窗 |
| Dialog.confirm | options | Promise | 展示消息确认弹窗 |
| Dialog.close | - | void | 关闭弹窗 |
#### **Options**
| 方法名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- |
| title | 标题 | String | 提示 |
| content | 内容 | String | -|
| type | 弹框类型 （默认：default 成功：success 失败：fail 确认：confirm） | String | default |
| showConfirmButton | 是否展示确认按钮 | Boolean | - |
| showCancelButton | 是否展示取消按钮 | Boolean | false |
| confirmButtonText | 确认按钮的文案 | String | 确认 |
| cancelButtonText | 取消按钮的文案 | String | 取消 |
| confirm | 点击确认按钮后的回调函数 | Function | then() 回调 |
| cancel | 点击取消按钮后的回调函数 | Function | catch()回调 |
#### **关于回调函数**
本组件有两种回调方式
1. 通过promise返回的回调方式 then() 执行确认按钮的回调，catch()执行取消按钮的回调。
2. 通过options参数传递 cancel属性 执行确认按钮的回调，confirm属性执行取消按钮的回调。
3. 两种执行方式，第二种优先级高于第一种。
#### **四、通过组件形式来调用Dialog**
~~~
<abc-dialog v-model="value" @cancel="cancel" @confirm="confirm" >
<div> slot 弹框内容自定义 </div>
</abc-dialog>
export default {
data () {
return {
value: true
}
},
methods: {
confirm(){ console.log('confirm 成功') },
cancel(){ console.log('cancel 成功') }
}
}
~~~
#### **Props：**
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- |
| v-model | 是否显示弹窗 | Boolean | - |
| title | 标题 | String | - |
| content | 内容 | String | -|
| type | 弹框类型 （默认：default 成功：success 失败：fail 确认：confirm） | String | default |
| showConfirmButton | 是否展示确认按钮 | Boolean | - |
| showCancelButton | 是否展示取消按钮 | Boolean | false |
| confirmButtonText | 确认按钮的文案 | String | 确认 |
| cancelButtonText | 取消按钮的文案 | String | 取消 |
#### **事件：**
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 点击确定后的回调事件 | - |
| cancel | 点击取消后的回调事件 | - |
