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

Lightweight Mobile UI Components built on Vue

## popup 按钮

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

Vue.use(Popup)
```

### 代码演示

```html
<drip-button class="main-button" @click="showPopup" type="orange">{{ $t('open') }}</drip-button>
    <drip-button class="main-button" @click="showPopup('slot')" type="orange">slot</drip-button>
    <drip-popup
      v-model="popup.show"
      :title="popup.title"
      :subtitle="popup.subtitle"
      position="bottom"
      :submit="popupSelect"
      :submitBtn="popup.submitBtn">
      <div class="content" slot="content">
        <drip-button
        @click="showNotify"
        type="orange">{{ $t('close') }}</drip-button>
      </div>
      <drip-button
        slot="button"
        @click="popup.show = false"
        size="large"
        type="orange">{{ $t('close') }}</drip-button>
    </drip-popup>
    <drip-popup
      v-model="popupSlot"
      :title="popup.title"
      :subtitle="popup.subtitle"
      position="bottom"
      :submit="popupSelect"
      :submitBtn="popup.submitBtn">
      <template slot="header">
        <div class="my_slot">我是slot</div>
      </template>
      <div class="content" slot="content">
        <drip-button
        @click="showNotify"
        type="orange">{{ $t('close') }}</drip-button>
      </div>
      <drip-button
        slot="button"
        @click="popup.show = false"
        size="large"
        type="orange">{{ $t('close') }}</drip-button>
    </drip-popup>
```
```js
data() {
  return {
    popup: {
      show: true,
      title: 'haha',
      subtitle: 'lalala',
      showRight: true
    }
  }
}
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| title | 弹框title | `String` | `''` |
| subtitle | 弹框小title | `String` | `''` |
| position | 弹框在哪个位置 `top` `bottom` `left` `right` | `String` | `bottom` |
| submitBtn | 是否展示提交按钮 | `Boolean` | `true` |
| isShowTitle | 是否展示弹框title | `Boolean` | `true`
| submit | 点击完成执行的函数 | `Function` | `-`|
| isClose | 是否关闭弹框 | `Boolean` | `_` |
| cancelFn | 点击叉号的关闭函数 | `Function` | `默认点击关闭弹框` |
| height | 弹框高度 | `String` | `内容的高度` |
| isCancelIcon | 是否显示右上角关闭icon | `Boolean` | `true` |
| isShowHeadBorder | 是否显示头部下方边框 | `Boolean` | `true` |

### Slot

| 参数 | 说明 | 参数 |
|-----------|-----------|-----------|
| header | 头部插槽 使用此插槽的时候title和subtitle属性失效 | `-` |