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

Lightweight Mobile UI Components built on Vue

## Confirm 确认框

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

Vue.use(Confirm);
```

### 代码演示

#### 插件式：

```html
<drip-button @click="onClickAlert1">正常使用</drip-button>
<drip-button @click="onClickAlert2">没有取消按钮</drip-button>
<drip-button @click="onClickAlert3">没有确定按钮</drip-button>
<drip-button @click="onClickAlert4">跳转到新页面</drip-button>
```

```javascript
onClickAlert1 () {
  this.$confirm.show({
    content: '被保人不符合健康要求，很抱歉暂时无法投保该产品。',
    confirmText: '选错了',
    cancelText: '了解其他产品',
    confirm: () => {
      this.$confirm.hide()
    },
    cancel: () => {
      this.$confirm.hide()
    }
  })
},

onClickAlert2 () {
  this.$confirm.show({
    content: '没有取消按钮',
    hideCancel: true
  })
},

onClickAlert3 () {
  this.$confirm.show({
    content: '没有确定按钮',
    hideConfirm: true
  })
},

onClickAlert4 () {
  this.$confirm.show({
    content: '跳转到别的页面',
    confirmText: '跳走了哦',
    hideCancel: true,
    confirm: () => {
      window.location.href = 'www.baidu.com'
    }
  })
}
```

#### 组件式：

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

<drip-confirm
  :visible="confirm1.visible"
  :content="confirm1.content"
  :confirmText="confirm1.confirmText"
  :cancelText="confirm1.cancelText"
  @confirm="confirmCall1"
  @cancel="cancelCall1">
</drip-confirm>
```

```html
<drip-button @click="confirm2.visible = true">支持内容自定义</drip-button>

<drip-confirm
  :visible="confirm2.visible"
  :confirmText="confirm2.confirmText"
  :cancelText="confirm2.cancelText"
  @confirm="confirmCall2"
  @cancel="cancelCall2">
  <div class="size">支持自定义内容</div>
</drip-confirm>
```

```javascript
data () {
  return {
    confirm1: {
      visible: false,
      content: '被保人不符合健康要求，很抱歉暂时无法投保该产品',
      confirmText: '选错了',
      cancelText: '了解其他产品'
    }
  }
},
methods: {
  cancelCall1 () {
    console.log('去做取消处理')
    this.confirm1.visible = false
  },
  confirmCall1 () {
    console.log('去做确定处理')
    this.confirm1.visible = false
  }
}
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| visible | 弹框是否展示 | `Boolean` | `false` |
| content | 弹框内部内容 | `String` | - |
| cancelText | 取消按钮文案 | `String` | 取消 |
| confirmText | 确定按钮按钮 | `String` | 确认 |
| hideCancel | 是否隐藏取消按钮 | `Boolean` | `false` |
| hideConfirm | 是否隐藏确定按钮 | `Boolean` | `false` |
| textAlign | 内容文案样式 | `String` |  `center` |
| fontWeight | 字体粗细 | `String` | 500 |
| confirmCall | 确定按钮点击函数 | `Function` | - |
| cancelCall | 取消按钮点击函数 | `Function` | - |
| touchmoveClose | touchmove时是否需要关闭弹窗 | `Boolean` | `false` |

### Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| confirm | 点击确定按钮触发 | - |
| cancel | 点击取消按钮触发 | - |