drip-ui/packages/dialog/zh-CN.md

Lightweight Mobile UI Components built on Vue

## Dialog 弹框

### 使用指南
``` javascript
import { Dialog } from 'drip-ui'

Vue.use(Dialog)
```

### 代码演示

#### 插件引用
```html
<drip-button @click="showDialog1" type="orange">消息提示</drip-button>
<drip-button @click="showDialog2">关闭弹框做些处理</drip-button>
<drip-button @click="showDialog3" type="blue">弹框加上标题</drip-button>
```

```javaScript
showDialog1 () {
  this.$dialog.show({
    content: '这个是消息提示'
  })
},
showDialog2 () {
  this.$dialog.show({
    content: '这个是消息提示',
    onHide: () => {
      console.log(3333)
      this.$dialog.hide()
    }
  })
},
showDialog3 () {
  this.$dialog.show({
    title: '这是标题',
    content: '这个内容<br>支持换行'
  })
}
```

#### 组件引用

```html
<drip-button
  @click="visible = true"
  type="orange">
  组件引用
</drip-button>

<drip-dialog
  :visible="visible"
  @onHide="visible = false"
  :title="'haha'">
  <div class="content">
    <p>组件引用方式</p>
  </div>
</drip-dialog>


<drip-button
  @click="visible2 = true"
  type="orange">
  活动弹框
</drip-button>
<drip-dialog
  :visible="visible2"
  :isSlot="true"
  :showClose="false">
  <div slot="free" class="content">
    <p>活动弹框</p>
    <drip-button
      @click="visible2 = false"
      type="orange">
      关闭弹框
    </drip-button>
  </div>
</drip-dialog>
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| visible | 弹框否展示  | `Boolean` | `false` |
| title | 弹框title | `String` | - |
| content | 弹框内容 | `String` | - |
| showClose | 是否展示关闭按钮 | `Boolean` | `true` |
| isSlot | 是否slot,活动弹框 | `Boolean` | `false` |
| touchmoveClose | touchmove时是否需要关闭弹窗 | `Boolean` | `false` |

### Event

| 事件名 | 说明 | 默认 |
|-----------|-----------|-----------|
| onHide | 点击关闭弹框叉号执行函数 | 默认关闭弹框 |