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

Lightweight Mobile UI Components built on Vue

## Form 表单

### 使用指南

``` javascript
import { Form } from 'drip-ui';

Vue.use(Form);
```

### 代码演示

```html
<drip-form
  :size="'small'"
  ref="applierForm"
  :title="'投保人信息'"
  :list="applierList"
  @select="selectInputRightBtn">
</drip-form>


<drip-button
  class="form-submit"
  @click="submit"
  size="large"
  type="orange">
  提交校验
</drip-button>


<!-- 弹框 -->
<drip-popup
  v-model="popup.show"
  :title="popup.title"
  position="bottom"
  :submitBtn="true">
  <div slot="content">
    <drip-picker
      v-if="popup.type === 'applierDepositBank'"
      :slots="bankList"
      value-key="name"
      @change="onValuesChange">
    </drip-picker>
  </div>
  <drip-button
    slot="button"
    @click="popupSelect"
    size="large"
    type="orange">
    完成
  </drip-button>
</drip-popup>
```

```javascript
// index.js
import { applierUserFn } from './data'
export default {
  data () {
    return {
      applierList: [], // 表单数据
      relTypeList: [{ // 选择关系列表
        name: '本人',
        value: 1
      }, {
        name: '配偶',
        value: 2
      }, {
        name: '父母',
        value: 3
      }, {
        name: '子女',
        value: 4
      }],
      bankList: [{ // 银行卡列表
        flex: 1,
        defaultIndex: 1,
        values: [{
          name: '招商银行',
          value: 111
        }, {
          name: '北京银行',
          value: 222
        }, {
          name: '中国银行',
          value: 333
        }, {
          name: '濮阳银行',
          value: 444
        }]
      }],
      popup: { // popup弹框
        show: false,
        title: '',
        type: ''
      },
      inputLocation: {}, // 存储当前选中的对象
      pickerMiddleware: [] // 存储picker当前选中的内容
    }
  },
  mounted () {
    this.applierList = applierUserFn(this.relTypeList)
  },
  methods: {
    selectInputRightBtn (data) {
      // 存储当前选中对象
      this.inputLocation = data
      const {item: {name, label}} = data
      this.popup = {
        type: name,
        title: label,
        show: true
      }
    },
    onValuesChange (picker, values) {
      // 存储当前picker选择数据
      this.pickerMiddleware = values
    },
    // 选择popup弹框
    popupSelect () {
      this.popup.show = false
      const { index } = this.inputLocation
      const { name, value } = this.pickerMiddleware[0]
      this.applierList[index].valueView = name
      this.applierList[index].value = value
    },
    // 表单校验
    submit () {
      let err = []
      this.$refs.applierForm
        .validate(result => {
          if (!result.status) err.push(result)
        })
      if (err.length) {
        this.$notify({
          content: err[0].errmsg
        })
        return
      }
      this.$notify({
        content: '校验通过',
        type: 'success'
      })
    }
  }
}
```

```javascript
// data.js
export const applierUserFn = (relTypeList) => {
  return [{
    name: 'applierUserName', // 用于标示当前对象的唯一索引值
    label: '姓名', // 左侧label显示的文案
    placeholder: '请输入投保人姓名', // input没有文案时展示的提示文案
    value: '', // input显示的内容, 且需要传入后端的数据
    rules: [{ // 校验规则
      required: true,
      errmsg: '请输入投保人姓名'
    }, {
      cname: true,
      errmsg: '投保人姓名有误'
    }]
  }, {
    name: 'applierIdCard',
    label: '身份证号',
    placeholder: '请输入身份证号码',
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入投保人身份证'
    }, {
      idCard: true,
      errmsg: '请输入正确的身份证'
    }]
  }, {
    name: 'applierMobile',
    label: '手机号码',
    placeholder: '请输入手机号码',
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入投保人手机号'
    }, {
      phone: true,
      errmsg: '请输入正确的手机号'
    }]
  }, {
    name: 'applierEmail',
    label: '邮箱',
    placeholder: '请输入邮箱',
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入邮箱'
    }, {
      email: true,
      errmsg: '请输入正确的邮箱'
    }],
  }, {
    name: 'applierdesc',
    label: '投保人性格爱好',
    placeholder: '最多填写30个字',
    rightType: 'textarea',
    maxlength: 30,
    value: '',
    rules: [{
      required: true,
      errmsg: '请输入您的喜好，至少30个字'
    }, {
      custom: /^([\u4e00-\u9fa50-9A-Za-z\-_()]{10,})$/, // 自定义规则校验
      errmsg: '不可少于10个字'
    }]
  }, {
    name: 'relType',
    label: '为谁投保',
    rightType: 'selectButton', // 右侧选项类型，如果是非input, 必填
    list: relTypeList, // 选项列表
    raValue: [1], // 初始化时默认选中的选项
  }, {
    name: 'insuranceNums',
    label: '投保份数',
    rightType: 'numInput', // 右侧选项类型，如果是非input, 必填
    minNum: 1,
    maxNum: 3,
    value: 1
  }, {
    name: 'applierDepositBank',
    label: '银行',
    placeholder: '请选择银行卡开户行',
    value: '',
    valueView: '',
    disabled: true, // input 框不可点击
    rules: [{
      required: true,
      errmsg: '请选择银行卡开户行'
    }],
    btn: () => { // 最右侧按钮（如果input可点击，热区只有按钮处，如果input框不可点，热区为整个input 部分）
      return `<button class="form-down"></button>`
    }
  }, {
    name: 'severeDisease',
    label: '重疾受益人',
    value: '被保人本人',
    disabled: true
  }, {
    name: 'death',
    label: '身故受益人',
    value: '法定受益人',
    disabled: true,
    hideLine: true // 隐藏下边框
  }, {
    label: '满期返还保费',
    riskDescShow: true, // 显示？条件1
    riskDesc: [ // 数组不为空 条件2
      {
        name: '标题',
        value: '1234'
      },
      {
        name: '标题2',
        // 必须是span要不有问题
        value: '<span>1</span>'
      }
    ],
  }]
}
```

#### form参数

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| title | 表单title | `String` | - |
| titleStyle | title样式 | `String` | - |
| list| 表单列表  数组对象 | `Array` | - |
| isSlot | 是否有solt | `Boolean` | false |
| size | 表单大小 | `default` `small` | `default` |

#### list 内部对象参数

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|----------|
| name | 用于标示当前对象的唯一索引值 | `String` | - |
| label| 左侧label显示的文案 | `String` | - |
| placeholder | input框未填写默认提示信息 | `String` | - |
| value | 需要传入后端的数据，如果对象没有valueView,此值同时也展示在页面 | `String` | - |
| valueView | 展示在页面input的值, 是有 disabled 属性或者过 showView 属性 为 true 才有用 | `String` | - |
| rightType | 右边是什么类型，不传默认是input弹框 `selectButton`: 选择按钮， `textarea`: 多行输入框, `numInput`: 份数选择 | `String` | - |
| minNum | 表单右侧为 `numInput`, 份数最小份 | `Number` | 1 |
| maxNum | 表单右侧为 `numInput`, 份数最大份 | `Number` | - |
| riskDescShow | 表单右侧是否显示?icon `Boolean` | false |
| riskDesc | 表单右侧`riskDescShow`为true 传入的选择数据，具体格式请看 `riskDesc` 组件 | `Array` | - |
| showView | 是否展示valueView | `Boolean` | false |
| maxlength | 表单右侧是 `textarea` 类型时，文案最长的长度 | `Number` | - |
| list | 右侧类型是`selectButton`时，传入的选择数据，具体格式请看 `selectButton` 组件 | `Array` | - |
| raValue | 右侧类型是`selectButton`时，刚开始默认选中的字段, 具体格式请看 `selectButton` 组件 | `Array` | - |
| type | 右侧类型是`selectButton`时，按钮类型, 具体格式请看 `selectButton` 组件 | `String` | radio |
| width | 右侧类型是`selectButton`时，选择按钮的宽度, 具体格式请看 `selectButton` 组件 | `String` | - |
| readonly | input或者textarea 是否添加readonly属性 | `Boolean` | false |
| disabled | input或者textarea 是否添加disabled属性 | `Boolean` | false |
| hideLine | 每一行都有底边框，是否隐藏 | `Boolean` | false |
| rules | 检验规则---具体格式见下 | `Array` | - |

##### 校验规则

1. cname -> 校验姓名
2. positiveNumber -> 校验是否是正数
3. idCard -> 校验身份证号
4. phone -> 校验手机号
5. email -> 校验邮箱
6. address -> 校验地址
7. cardNo -> 校验身份证号
8. custom -> 支持自定义规则校验

```javascript
// eg
rules: [{
  required: true,
  errmsg: '请输入邮箱'
}, {
  email: true,
  errmsg: '请输入正确的邮箱'
}, {
  custom: /\d+/, // custom为自定义校验规则
  errmsg: '....'
}]
```

### Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| select | 选中按钮触发的事件 | item, index, arentIndex: |
| getRaValue | 选中选择按钮触发的事件 | item, value |
| focus | 获取焦点时 | item, index |
| blur | 失去焦点 | item，index |
| input change | input 更新 | item, index |
| highMax | 选择分数超过最大 | val |
| lowMin | 选择分数小于最小 | val |
| getNumValue | 选择份数每次触发 | item, value, type |


#### 组件包含的方法，可以直接通过refs去获取

| 事件名 | 说明 | 参数 | 返回值 |
| --| --- | --| -- |
| validate | 校验数据 | callback 函数 | - |
| getNameValue | 获取指定name的value值 | name | value |
| getValues| 获取表单全部的value值 | - | obj: {name: value} |


#### 注意！！需要注意，手机号校验时，会把用户填写的所有除数字以外的信息过滤掉再进行校验，这里是为了解决ios11粘贴拨号盘的隐形字符的校验问题
#### 如果不是用表单暴露的getValues方法去获取数据，自己实现的话，需要注意获取到的手机号有可能包含空格或其他字符，与后端交互或者做其他操作都应当过滤掉！！