## MessageBox 组件
MessageBox 组件支持函数调用和组件调用两种形式

### Import
```js
import { MessageBox } from 'bxs-ui-vue';
```
或
```js
import Vue from 'vue'
import { MessageBox } from 'bxs-ui-vue'
// 使用Vue.use(MessageBox)后，install方法会执行Vue.prototype.$messagebox = MessageBox;
Vue.use(MessageBox);
```

### Example
使用`Vue.use(MessageBox)`后，可用`this.$messagebox`替代`MessageBox`<br /><br />
普通alert
```js
this.$messagebox.alert('正文内容可带html标签').then(() => {
  console.log('知道了')
})
```
带标题alert
```js
this.$messagebox.alert('正文内容可带html标签', '温馨提示').then(() => {
  console.log('知道了')
})
```
带说明文字alert
```js
this.$messagebox.alert('正文内容可带html标签', '温馨提示', '说明文字').then(() => {
  console.log('知道了')
})
```
普通dialog
```js
this.$messagebox.dialog('普通dialog').then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```
带标题dialog
```js
this.$messagebox.dialog('普通dialog', '温馨提示').then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```
带说明文字dialog
```js
this.$messagebox.dialog('普通dialog', '温馨提示', '说明文字').then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```
自定义内容dialog
```html
<bxs-message-box v-model="isShow" @before-close="beforeClose">
  <bxs-input label="用户名" type="text" placeholder="请输入内容"/>
  <bxs-input label="密码" type="text" placeholder="请输入密码"/>
</bxs-message-box>
```
```js
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    showCustom() {
      this.isShow = true
    },
    beforeClose (action, done) {
      // action 为confirm或cancel，调用 done(false) 阻止弹窗关闭
      done()
    }
  }
}
```
通用调用方式
```js
this.$messagebox({
  title: '温馨提示',
  message: '正文内容',
  tips: '说明文字',
  className: 'customClass',
  messageAlign: 'center',
  cancelButtonText: '取消',
  confirmButtonText: '确定',
  showCancel: true,
  showConfirm: true
}).then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```
按钮高亮按照正反向操作变化
```js
this.$messagebox.dialog('按钮高亮按照正反向操作变化', {
  cancelButtonColor: '#508cee',
  confirmButtonColor: '',
}).then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```
按钮高亮颜色可自定义
```js
this.$messagebox.dialog('按钮高亮颜色可自定义', {
  confirmButtonColor: '#ff5000',
}).then(() => {
  console.log('确定')
}).catch(() => {
  console.log('取消')
})
```

### Attributes
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| title | 可选，标题 | String | - |
| message | 可选，弹框正文内容 | String | - |
| tips | 可选，说明文字 | String | - |
| class-name | 可选，自定义类名 | String, Object, Array | - |
| message-align | 可选，内容对齐方式，可选值为`left` `right` `center` `justify` | Boolean | center |
| cancel-button-text | 可选，取消按钮文案 | String | 取消 |
| confirm-button-text | 可选，确认按钮文案 | String | 确定 |
| cancel-button-color | 可选，取消按钮颜色 | String | - |
| confirm-button-color | 可选，确认按钮颜色 | String | #508cee |
| show-cancel | 可选，是否显示取消按钮 | Boolean | true |
| show-confirm | 可选，是否显示确定按钮 | Boolean | true |

### Slot
| 参数 | 说明 |
| --- | --- |
| — | 默认slot |

### Event
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| before-close | 关闭前的回调函数，<br/>调用 done() 后关闭弹窗，<br/>调用 done(false) 阻止弹窗关闭 | action, done |
