# DgForm 表单

> 基于 elementUi 封装集成度更高的表单组件，结合了 DgSelect 下拉框组件，配置相应参数，快速制作表单。(目前支持自定义文本内容、基本输入框、带输入建议的输入框、选择框、inputnumber 计数器、textarea 输入框、开关按钮、radio 单选框、radio 按钮单选框、checkbox 多选框、checkbox 按钮多选框、时间选择框、日期选择框、文件上传)

::: demo 组件 Form 使用示例

```vue
<template>
  <div style="height: 700px;overflow:auto">
    <el-button @click="getFormData" type="success">获取表单数据</el-button>
    <dg-form
      :formData.sync="formModel.formData"
      :rules="formModel.rules"
      :formItems="formModel.formItems"
      :resetForm="true"
      labelWidth="180px"
    >
    </dg-form>
  </div>
</template>

<script>
export default {
  name: 'testDgForm',
  data() {
    return {
      formModel: {
        formData: {
          inputValue: '',
          selectValue: '',
          textareaValue: '',
          inputNumberValue: '',
          switchValue: null,
          radioValue: '',
          radioButtonValue: '',
          checkboxValue: [],
          checkboxButtonValue: [],
          timeSelectValue: null,
          timeRangeSelectValue: null,
          datePickerValue: null,
          dateRangePickerValue: null,
          datetimeRangePickerValue: null,
          fileList: [],
        },
        formItems: [
          {
            editer: 'input',
            label: '输入框测试：',
            value: 'inputValue',
            prefixIcon: 'el-icon-search',
            suffixIcon: 'el-icon-date',
          },
          {
            editer: 'select',
            label: '下拉框测试：',
            value: 'selectValue',
            apiCode: 'sysBusiSystemSelect',
            handleChange: this.selectChange,
          },
          {
            editer: 'inputNumber',
            label: 'inputNumber输入框测试：',
            value: 'inputNumberValue',
            handleChange: this.inputNumberChange,
          },
          { editer: 'textarea', label: 'textarea输入框测试：', value: 'textareaValue' },
          {
            editer: 'switch',
            label: '开关测试：',
            value: 'switchValue',
            activeText: '开',
            inactiveText: '关',
            handleChange: this.switchChange,
          },
          {
            editer: 'radio',
            label: '单选框测试：',
            value: 'radioValue',
            options: [
              { name: '选择1', value: '1', border: true },
              { name: '选择2', value: '2' },
              { name: '选择3', value: '3' },
            ],
            handleChange: this.radioChange,
          },
          {
            editer: 'radioButton',
            label: '单选按钮框测试：',
            value: 'radioButtonValue',
            options: [
              { name: '选择1', value: '1' },
              { name: '选择2', value: '2' },
              { name: '选择3', value: '3' },
            ],
            handleChange: this.radioButtonChange,
          },
          {
            editer: 'checkbox',
            label: '多选框测试：',
            value: 'checkboxValue',
            options: [
              { name: '选择1', value: '1' },
              { name: '选择2', value: '2', border: true },
              { name: '选择3', value: '3' },
            ],
            handleChange: this.checkboxChange,
          },
          {
            editer: 'checkboxButton',
            label: '多选框按钮测试：',
            value: 'checkboxButtonValue',
            options: [
              { name: '选择1', value: '1' },
              { name: '选择2', value: '2' },
              { name: '选择3', value: '3' },
            ],
            handleChange: this.checkboxButtonChange,
          },
          {
            editer: 'timePicker',
            label: '时间选择框测试：',
            value: 'timeSelectValue',
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'timePicker',
            label: '时间范围选择框测试：',
            value: 'timeRangeSelectValue',
            isRange: true,
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'datePicker',
            label: '日期选择框测试：',
            value: 'datePickerValue',
            type: 'date',
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'datePicker',
            label: '日期范围选择框测试：',
            value: 'dateRangePickerValue',
            type: 'daterange',
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'datePicker',
            label: '日期时间选择框测试：',
            value: 'datetimePickerValue',
            type: 'datetime',
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'datePicker',
            label: '日期时间范围选择框测试：',
            value: 'datetimeRangePickerValue',
            type: 'datetimerange',
            handleChange: this.dateTimeChange,
          },
          {
            editer: 'fileUpload',
            label: '文件上传测试：',
            value: 'fileList',
            action: 'https://jsonplaceholder.typicode.com/posts/',
          },
        ],
        rules: {
          inputValue: [{ required: true, message: '请输入', trigger: 'blur' }],
          selectValue: [{ required: true, message: '请选择', trigger: 'change' }],
          textareaValue: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
      },
    }
  },
  created() {},
  methods: {
    // 获取表单数据
    getFormData() {
      console.log(this.formModel.formData)
    },
    // 选择框触发事件
    selectChange(event, item, formData, value) {
      console.log(event, item, formData, value)
    },
    // 数字输入触发事件
    inputNumberChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 开关触发事件
    switchChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 单选框触发事件
    radioChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 按钮单选框触发事件
    radioButtonChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 多选框触发事件
    checkboxChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 按钮多选框触发事件
    checkboxButtonChange(item, formData, value) {
      console.log(item, formData, value)
    },
    // 日期时间触发时间
    dateTimeChange(item, formData, value) {
      console.log(item, formData, value)
    },
  },
}
</script>
```

:::

`

## API

| 属性          | 说明             |   类型    | 默认值  |      可选值      |
| ------------- | ---------------- | :-------: | :-----: | :--------------: |
| formData      | 表格数据         | `Object`  |    -    |        -         |
| rules         | 校验规则         | `Object`  |    -    |        -         |
| formItems     | 表单配置         |   `Arr`   |    -    |        -         |
| resetForm     | 是否开启重置按钮 | `Boolean` | `false` |   `false/true`   |
| labelWidth    | 表单域标签的宽度 | `String`  |    -    |
| labelPosition | 表单域标签的位置 | `String`  | `right` | `right/left/top` |
| inline        | 行内表单模式     | `Boolean` | `false` |        -         |

## `formItems`配置属性说明

| 属性          | 说明                                                                         |   类型   | 默认值 |                                                                 可选值                                                                  |
| ------------- | ---------------------------------------------------------------------------- | :------: | :----: | :-------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------- |
| editer        | 表单中输入框类型                                                             | `String` |        | `input/text/autocomplete/select/inputNumber/textarea/switch/radio/radioButton/checkbox/checkboxButton/timePicker/datePicker/fileUpload` |
| label         | 标签文本                                                                     | `String` |        |                                                                    -                                                                    |
| formItemStyle | formItem 自定义样式                                                          | `String` |        |                                                                    -                                                                    |
| value         | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | `String` |        |                                                                    -                                                                    | 传入 Form 组件的 model 中的字段 ｜ |

## `formItems-text`自定义文本内容配置属性说明

| 属性    | 说明           |   类型   | 默认值 | 可选值 |
| ------- | -------------- | :------: | :----: | :----: |
| style   | 输入框内联样式 | `String` |        |   -    |
| content | 文本内容       | `String` |        |   -    |

```js{4}
{ editer: 'text', content: 'text自定义内容', style: 'color: red;' }
```

## `formItems-input`基本输入框配置属性说明

| 属性         | 说明                                     |    类型    | 默认值 | 可选值  |
| ------------ | ---------------------------------------- | :--------: | :----: | :-----: | ------------------------------------------- |
| type         | 类型                                     |  `String`  |        |    -    | text，textarea 和其他 原生 input 的 type 值 |
| style        | 输入框内联样式                           |  `String`  |        |    -    |
| placeholder  | 输入框占位文本                           |  `String`  |        |    -    |
| disabled     | 是否禁用状态                             | `Boolean`  |        | `false` |
| size         | 输入框尺寸，只在 type!="textarea" 时有效 |  `String`  |        | `mini`  | medium / small / mini                       |
| prefixIcon   | 输入框头部图标                           |  `String`  |        |    -    |
| suffixIcon   | 输入框尾部图标                           |  `String`  |        |    -    |
| showPassword | 是否显示切换密码图标                     | ` Boolean` |        | `false` |
| handleFocus  | 在 Input 获得焦点时触发                  | `Function` |        |    -    |

```js{4}
{ editer: 'input', label: '输入框测试：', value: 'inputValue', prefixIcon: 'el-icon-search', suffixIcon: 'el-icon-date' }
```

## `formItems-autocomplete`带输入建议的输入框配置属性说明

| 属性        | 说明                       |    类型    | 默认值 | 可选值  |
| ----------- | -------------------------- | :--------: | :----: | :-----: | --------------------- |
| style       | 输入框内联样式             |  `String`  |        |    -    |
| placeholder | 输入框占位文本             |  `String`  |        |    -    |
| disabled    | 是否禁用状态               | `Boolean`  |        | `false` |
| size        | 输入框尺寸                 |  `String`  |        | `mini`  | medium / small / mini |
| searchFn    | 输入框输入时调用的查询函数 | `Function` |        |    -    |
| aftSelect   | 选择后调用函数             | `Function` |        |    -    |

```js{4}
{ editer: 'autocomplete', label: '带建议的输入框测试：', value: 'autocompleteValue', searchFn: searchFn, aftSelect: aftSelect }
// 输入时调用的返回下拉框选项的信息
let searchFn = function (queryString, item) {
    // 参数：1、输入框中输入的值；2、当前配置项的配置信息
    console.log(queryString, item)
    let result = [{value: '1', title: 1, test: 'test'}, {value: '2', title: 2, test: 'test'}] // 下拉框中的选项
    return result
}
// 选择下拉框中的选项后调用的函数
let aftSelect = function (selectItem, item) {
    // 参数：1、选择的项目，包括名字和值；2、当前配置项的配置信息
    console.log(selectItem, item)
}
```

## `formItems-select`选择框配置属性说明

| 属性          | 说明                                             |    类型    | 默认值 | 可选值  |                    事例 ｜                    |
| ------------- | ------------------------------------------------ | :--------: | :----: | :-----: | :-------------------------------------------: | --- | ---- |
| name          | 绑定值的 name 中文名                             |  `String`  |        |    -    |                    - ｜ -                     |
| clearable     | 是否可以清空选项                                 | `Boolean`  |        | `false` |
| style         | 输入框内联样式                                   |  `String`  |        |    -    |
| placeholder   | 输入框占位文本                                   |  `String`  |        |    -    |
| disabled      | 是否禁用状态                                     | `Boolean`  |        | `false` |
| size          | 输入框尺寸                                       |  `String`  |        | `mini`  |             medium / small / mini             |
| dimCode       | 数据库所对应的 dimCode 值                        |  `String`  |        |    -    |                   `select`                    |
| apiCode       | 数据库所对应的 apiCode 值                        |  `String`  |        |    -    |
| filterVal     | 使用 apiCdoe 加 dimCode 方式取下拉框值时的过滤值 |  `String`  |        |    -    |
| selectOptions | 直接传入的下拉框中的所有值                       |  `Array`   |        |    -    | `[{name: '1', id: 'a'},{name: '2', id: 'b'}]` |
| selectStr     | 直接传入的下拉框中的所有值                       |  `String`  |        |    -    |                     ```a                      | 1,b | 2``` |
| handleChange  | 下拉框选择后调用的自定义函数                     | `Function` |        |    -    |

```js{4}
{ editer: 'select', label: '下拉框测试：', value: 'selectValue', dimCode: 'testA', clearable: true, handleChange: selectChange }
// 选择完成后触发的函数
let selectChange = function (event, item, formData, value) {
     // 参数：1、[value, index, options's length]；2、当前配置项的配置信息；3、表单数据；4、选择的值
    console.log(event, item, formData, value)
}
```

## `formItems-inputnumber`计数器配置属性说明

| 属性         | 说明                   |    类型    | 默认值 | 可选值  |
| ------------ | ---------------------- | :--------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式         |  `String`  |        |    -    |
| min          | 设置计数器允许的最小值 |  `Number`  |        |    -    |
| max          | 设置计数器允许的最大值 |  `Number`  |        |    -    |
| step         | 计数器步长             |  `Number`  |        |    -    |
| disabled     | 是否禁用状态           | `Boolean`  |        | `false` |
| size         | 输入框尺寸             |  `String`  |        | `mini`  | medium / small / mini |
| placeholder  | 输入框占位文本         |  `String`  |        |    -    |
| handleChange | 选择后触发函数         | `Function` |        |    -    |

```js{4}
{ editer: 'inputNumber', label: 'inputNumber输入框测试：', value: 'inputNumberValue', handleChange: inputNumberChange }
// 计数器中值改变触发
let inputNumberChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-textarea`textarea 输入框配置属性说明

| 属性        | 说明           |   类型    | 默认值 | 可选值  |
| ----------- | -------------- | :-------: | :----: | :-----: | --------------------- |
| style       | 输入框内联样式 | `String`  |        |    -    |
| rows        | 输入框行数     | `Number`  |        |   `2`   |
| disabled    | 是否禁用状态   | `Boolean` |        | `false` |
| size        | 输入框尺寸     | `String`  |        | `mini`  | medium / small / mini |
| placeholder | 输入框占位文本 | `String`  |        |    -    |

```js{4}
{ editer: 'textarea', label: 'textarea输入框测试：', value: 'textareaValue' }
```

## `formItems-switch`开关按钮配置属性说明

| 属性         | 说明              |            类型             | 默认值 | 可选值  |
| ------------ | ----------------- | :-------------------------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式    |          `String`           |        |    -    |
| disabled     | 是否禁用状态      |          `Boolean`          |        | `false` |
| size         | 输入框尺寸        |          `String`           |        | `mini`  | medium / small / mini |
| activeText   | switch 打开时的值 | `Boolean / String / Number` |        |    -    |
| inactiveText | switch 关闭时的值 | `Boolean / String / Number` |        |    -    |
| handleChange | 选择后触发函数    |         `Function`          |        |    -    |

```js{4}
{ editer: 'switch', label: '开关测试：', value: 'switchValue', activeText: '开', inactiveText: '关', handleChange: switchChange }
// 开或关时调用
let switchChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-radio`radio 单选框配置属性说明

| 属性         | 说明           |    类型    | 默认值 | 可选值  |
| ------------ | -------------- | :--------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式 |  `String`  |        |    -    |
| options      | 单选框选项     |  `Array`   |        |    -    |
| disabled     | 是否禁用状态   | `Boolean`  |        | `false` |
| size         | 输入框尺寸     |  `String`  |        | `mini`  | medium / small / mini |
| handleChange | 选择后触发函数 | `Function` |        |    -    |

```js{4}
{ editer: 'radio', label: '单选框测试：', value: 'radioValue', options: [{name: '选择1', value: '1', border: true}, {name: '选择2', value: '2'}, {name: '选择3', value: '3'}], handleChange: radioChange }
// 单选框选择后触发
let radioChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-radioButton`radio 按钮单选框配置属性说明

| 属性         | 说明           |    类型    | 默认值 | 可选值  |
| ------------ | -------------- | :--------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式 |  `String`  |        |    -    |
| options      | 单选框选项     |  `Array`   |        |    -    |
| disabled     | 是否禁用状态   | `Boolean`  |        | `false` |
| size         | 输入框尺寸     |  `String`  |        | `mini`  | medium / small / mini |
| handleChange | 选择后触发函数 | `Function` |        |    -    |

```js{4}
{ editer: 'radioButton', label: '单选按钮框测试：', value: 'radioButtonValue', options: [{name: '选择1', value: '1'}, {name: '选择2', value: '2'}, {name: '选择3', value: '3'}], handleChange: radioButtonChange }
// 单选按钮框选择后触发
let radioButtonChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-checkbox`checkbox 多选框配置属性说明

| 属性         | 说明           |    类型    | 默认值 | 可选值  |
| ------------ | -------------- | :--------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式 |  `String`  |        |    -    |
| options      | 多选框选项     |  `Array`   |        |    -    |
| disabled     | 是否禁用状态   | `Boolean`  |        | `false` |
| size         | 输入框尺寸     |  `String`  |        | `mini`  | medium / small / mini |
| handleChange | 选择后触发函数 | `Function` |        |    -    |

```js{4}
{ editer: 'checkbox', label: '多选框测试：', value: 'checkboxValue', options: [{name: '选择1', value: '1'}, {name: '选择2', value: '2', border: true}, {name: '选择3', value: '3'}], handleChange: checkboxChange }
// 多选框选择后触发
let checkboxChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-checkboxButton`checkboxButton 按钮多选框配置属性说明

| 属性         | 说明           |    类型    | 默认值 | 可选值  |
| ------------ | -------------- | :--------: | :----: | :-----: | --------------------- |
| style        | 输入框内联样式 |  `String`  |        |    -    |
| options      | 多选框选项     |  `Array`   |        |    -    |
| disabled     | 是否禁用状态   | `Boolean`  |        | `false` |
| size         | 输入框尺寸     |  `String`  |        | `mini`  | medium / small / mini |
| handleChange | 选择后触发函数 | `Function` |        |    -    |

```js{4}
{ editer: 'checkboxButton', label: '多选框按钮测试：', value: 'checkboxButtonValue', options: [{name: '选择1', value: '1'}, {name: '选择2', value: '2'}, {name: '选择3', value: '3'}], handleChange: checkboxButtonChange }
// 多选按钮框选择后触发
let checkboxButtonChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-timePicker`时间选择框配置属性说明

| 属性             | 说明                                     |                  类型                   | 默认值 | 可选值  |
| ---------------- | ---------------------------------------- | :-------------------------------------: | :----: | :-----: | ---------------------------------------------------- |
| style            | 输入框内联样式                           |                `String`                 |        |    -    |
| disabled         | 是否禁用状态                             |                `Boolean`                |        | `false` |
| size             | 输入框尺寸                               |                `String`                 |        | `mini`  | medium / small / mini                                |
| isRange          | 是否为时间范围选择                       |                `Boolean`                |        | `false` |
| valueFormat      | 绑定值的格式。不指定则绑定值为 Date 对象 |                `String`                 |        |    -    | 见日期格式                                           |
| defaultValue     | 可选，选择器打开时默认显示的时间         | `Date(TimePicker) / string(TimeSelect)` |        |    -    | 可被 new Date()解析(TimePicker) / 可选值(TimeSelect) |
| pickerOptions    | 当前时间日期选择器特有的选项             |                `Object`                 |        |    -    |
| rangeSeparator   | 选择范围时的分隔符                       |                `String`                 |        |  `'-'`  |
| startPlaceholder | 范围选择时开始日期的占位内容             |                `String`                 |        |    -    |
| endPlaceholder   | 范围选择时开始日期的占位内容             |                `String`                 |        |    -    |
| handleChange     | 选择后触发函数                           |               `Function`                |        |    -    |

```js{4}
{ editer: 'timePicker', label: '时间选择框测试：', value: 'timeSelectValue', handleChange: dateTimeChange},
{ editer: 'timePicker', label: '时间范围选择框测试：', value: 'timeRangeSelectValue', isRange: true, handleChange: dateTimeChange}
// 选择时间后触发
let dateTimeChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-datePicker`日期选择框配置属性说明

| 属性             | 说明                                           |    类型    | 默认值 |    可选值    |
| ---------------- | ---------------------------------------------- | :--------: | :----: | :----------: | ------------------------------------------------------------------------ |
| style            | 输入框内联样式                                 |  `String`  |        |      -       |
| type             | 显示类型                                       |  `String`  |        |    `date`    | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange |
| disabled         | 是否禁用状态                                   | `Boolean`  |        |   `false`    |
| size             | 输入框尺寸                                     |  `String`  |        |    `mini`    | medium / small / mini                                                    |
| format           | 显示在输入框中的格式                           |  `String`  |        | `yyyy-MM-dd` | 见日期格式                                                               |
| valueFormat      | 可选，绑定值的格式。不指定则绑定值为 Date 对象 |  `String`  |        |      -       | 见日期格式                                                               |
| rangeSeparator   | 选择范围时的分隔符                             |  `String`  |        |    `'-'`     |
| startPlaceholder | 范围选择时开始日期的占位内容                   |  `String`  |        |      -       |
| endPlaceholder   | 范围选择时开始日期的占位内容                   |  `String`  |        |      -       |
| handleChange     | 选择后触发函数                                 | `Function` |        |      -       |

```js{4}
{ editer: 'datePicker', label: '日期选择框测试：', value: 'datePickerValue', type: 'date', handleChange: dateTimeChange }
{ editer: 'datePicker', label: '日期范围选择框测试：', value: 'dateRangePickerValue', type: 'daterange', handleChange: dateTimeChange }
{ editer: 'datePicker', label: '日期时间选择框测试：', value: 'datetimePickerValue', type: 'datetime', handleChange: dateTimeChange }
{ editer: 'datePicker', label: '日期时间范围选择框测试：', value: 'datetimeRangePickerValue', type: 'datetimerange', handleChange: dateTimeChange }
// 选择时间后触发
let dateTimeChange = function (item, formData, value) {
    // 参数：1、当前配置项的配置信息；2、表单数据；3、当前值
    console.log(item, formData, value)
}
```

## `formItems-fileUpload`文件上传配置属性说明

| 属性   | 说明                 |   类型   | 默认值 | 可选值 |
| ------ | -------------------- | :------: | :----: | :----: |
| action | 必选参数，上传的地址 | `String` |        |   -    |

```js{4}
{ editer: 'fileUpload', label: '文件上传测试：', value: 'fileList', action: 'https://jsonplaceholder.typicode.com/posts/' }
```

## `formItems`新增属性说明

| 属性       | 说明                                                                                                  |   类型    | 默认值 |    可选值    |
| ---------- | ----------------------------------------------------------------------------------------------------- | :-------: | :----: | :----------: |
| explain    | 显示 ? 号对应的提示内容                                                                               | `String`  |        |     `''`     |
| helpSelect | 下拉选定后自动显示提示信息                                                                            | `Boolean` |        | `true/false` |
| helpInfo   | 提示信息的具体内容，每个数组 item 都是一一对应下拉 item（比如第一个数组元素对应下拉第一项的提示内容） |  `Array`  |   []   |              |
| autoShow   | 自动关联组件变化                                                                                      | `Boolean` |        | `true/false` |

## 更新日志

#### v1.0.0（2019-09-16）

- 初始版本

#### v1.0.8（2019-09-19）

- [优化] 支持开关，单选，多选，时间日期选择范围框，文件上传
- [优化] 支持规则验证，是否开启重置按钮
- [优化] 支持 formItems 配置中传入操作事件

#### v1.0.9（2019-09-24）

- [优化] 支持 inputNumber 数字输入框

#### v1.0.9（2019-03-07）

- 完善文档

#### v1.0.9（2019-03-15）

- 完善文档