---
nav: default
---
<!--THIS FILE IS AUTOGENERATED, DONOT EDIT IT-->
## form

---

### Cell
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/cell/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/cell" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/cell" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Cell.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Cell } from 'cvux'
```

```html
  <group>
    <cell title="title" value="value"></cell>
  </group>
```
<p class="tip">cell只能在`Group`中使用</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 左边标题文字 |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 右侧文字，复杂的样式布局请使用slot |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题下面文字，一般为说明文字 |
| <span class="prop-key" style="white-space:nowrap;">is-link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 是否为链接，如果是，右侧将会出现指引点击的右箭头 |
| <span class="prop-key" style="white-space:nowrap;">primary</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可选值为 ['title', 'content']，对应的div会加上weui_cell_primary类名实现内容宽度自适应 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 右侧内容，相比于value的优点是可以用复杂的样式或者调用组件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">value</span> | [废弃] 同默认slot | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">icon</span> | 标题左侧的图像位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">after-title</span> | 标题右侧位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">child</span> | cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/cell">Demo page</a>





---

### CheckIcon
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/check-icon/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/check-icon" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/check-icon" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/CheckIcon.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { CheckIcon } from 'cvux'
```


`CheckIcon` 是一个icon选中组件。


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;">v1.3.10</span> | 是否选中，使用 :value.sync 双向绑定 |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | unknown | <span style="font-size:12px;white-space:nowrap;">v1.3.10</span> | check icon 样式，可选值为['plain'] |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/check-icon">Demo page</a>





---

### CheckerItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checker-item/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checker" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checker-item" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/CheckerItem.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { CheckerItem } from 'cvux'
```


`Checker` 是比`Radio`或者`Checklist`更加灵活的选择组件，可以自定义需要的布局样式。


<span class="vux-component-name">Checker</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 默认状态class |
| <span class="prop-key" style="white-space:nowrap;">selected-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选中样式class |
| <span class="prop-key" style="white-space:nowrap;">disabled-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 不可选样式class |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | radio | <span style="font-size:12px;white-space:nowrap;"></span> | 类型，单选为`radio`, 多选为`checkbox` |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最多可选个数，多选时可用 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | value值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<span class="vux-component-name">CheckerItem</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 当前项的值 |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否为不可选 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-item-click</span> |   `(itemValue, itemDisabled)` | 当前项被点击时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checker">Demo page</a>





---

### Checker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checker/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checker" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Checker.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Checker } from 'cvux'
```


`Checker` 是比`Radio`或者`Checklist`更加灵活的选择组件，可以自定义需要的布局样式。


<span class="vux-component-name">Checker</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 默认状态class |
| <span class="prop-key" style="white-space:nowrap;">selected-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选中样式class |
| <span class="prop-key" style="white-space:nowrap;">disabled-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 不可选样式class |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | radio | <span style="font-size:12px;white-space:nowrap;"></span> | 类型，单选为`radio`, 多选为`checkbox` |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最多可选个数，多选时可用 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | value值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<span class="vux-component-name">CheckerItem</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 当前项的值 |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否为不可选 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-item-click</span> |   `(itemValue, itemDisabled)` | 当前项被点击时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checker">Demo page</a>





---

### Checklist
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checklist/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checklist" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checklist" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Checklist.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Checklist } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否为必选 |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选项列表，可以为`[{key:'name',value:'value',inlineDesc:'inlineDesc'}]`的形式 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最多可选个数 |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最少可选个数 |
| <span class="prop-key" style="white-space:nowrap;">random-order</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否随机打乱选项顺序 |
| <span class="prop-key" style="white-space:nowrap;">check-disabled</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否进行可选检测，默认情况下当选择个数等于可选个数(max)时，其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。 |
| <span class="prop-key" style="white-space:nowrap;">label-position</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | label 位置，可以设置为 left 或者 right |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 是否禁用操作 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   (value) | 值变化时触发，参数为 (value) | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">getFullValue</span> |   &nbsp; | 获取值和对应的显示文字 |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checklist">Demo page</a>





---

### Datetime
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/datetime/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/datetime" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/datetime" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Datetime.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Datetime } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">format</span> | <span class="type type-string">String</span> | YYYY-MM-DD | <span style="font-size:12px;white-space:nowrap;"></span> | 时间格式，不支持特殊字符，只能类似 YYYY-MM-DD HH:mm:ss 这样的格式 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 描述字符 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 提示文字，当`value`为空时显示 |
| <span class="prop-key" style="white-space:nowrap;">min-year</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可选择的最小年份 |
| <span class="prop-key" style="white-space:nowrap;">max-year</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可选择的最大年份 |
| <span class="prop-key" style="white-space:nowrap;">min-hour</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 限定小时最小值 |
| <span class="prop-key" style="white-space:nowrap;">max-hour</span> | <span class="type type-number">Number</span> | 23 | <span style="font-size:12px;white-space:nowrap;"></span> | 限定小时最大值 |
| <span class="prop-key" style="white-space:nowrap;">min-minute</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 限定分钟最小值 |
| <span class="prop-key" style="white-space:nowrap;">max-minute</span> | <span class="type type-number">Number</span> | 23 | <span style="font-size:12px;white-space:nowrap;"></span> | 限定分钟最大值 |
| <span class="prop-key" style="white-space:nowrap;">confirm-text</span> | <span class="type type-string">String</span> | ok(确认) | <span style="font-size:12px;white-space:nowrap;"></span> | 确认按钮文字 |
| <span class="prop-key" style="white-space:nowrap;">cancel-text</span> | <span class="type type-string">String</span> | cancel(取消) | <span style="font-size:12px;white-space:nowrap;"></span> | 取消按钮文字 |
| <span class="prop-key" style="white-space:nowrap;">clear-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 显示在中间的自定义按钮的文字 |
| <span class="prop-key" style="white-space:nowrap;">year-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | 年份的渲染模板 |
| <span class="prop-key" style="white-space:nowrap;">month-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | 月份的渲染模板 |
| <span class="prop-key" style="white-space:nowrap;">day-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | 日期的渲染模板 |
| <span class="prop-key" style="white-space:nowrap;">hour-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | 小时的渲染模板 |
| <span class="prop-key" style="white-space:nowrap;">minute-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | 分钟的渲染模板 |
| <span class="prop-key" style="white-space:nowrap;">start-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 限定最小日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟。小时限定请使用`min-hour`和`max-hour` |
| <span class="prop-key" style="white-space:nowrap;">end-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 限定最大日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟 |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否必填 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 触发元素内容 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | 表单值变化时触发, 参数 `(newVal)` | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-clear</span> |   &nbsp; | 点击显示在中间的自定义按钮时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | 弹窗显示时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/datetime">Demo page</a>





---

### Group
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/group/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/group" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/group" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Group.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Group } from 'cvux'
```

`Group`是一个特殊的表单`wrapper`组件，主要用于将表单分组，单个表单元素也算一组。常见的表单组件都`必须`作为`Group`的子组件。 属于`Group`子组件的有：Cell, XInput, XTextarea, XSwitch, Calendar, XNumber, Radio, XAddress, Datetime, Selector


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 分组标题 |
| <span class="prop-key" style="white-space:nowrap;">title-color</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 分组标题文字颜色 |
| <span class="prop-key" style="white-space:nowrap;">label-width</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 为子元素设定统一label宽度 |
| <span class="prop-key" style="white-space:nowrap;">label-align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 为子元素设定统一对齐方式 |
| <span class="prop-key" style="white-space:nowrap;">label-margin-right</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 为子元素设定统一的右边margin |
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 设定group的上边距，只能用于没有标题时 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 子组件插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">title</span> | 标题插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/group">Demo page</a>





---

### InlineCalendar
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/inline-calendar/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/inline-calendar" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/inline-calendar" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/InlineCalendar.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { InlineCalendar } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 当前选中日期，使用`v-model`绑定。值为字符串(包括空字符串)时表示单选日期，为数组(包括空数组)时表示多选。 |
| <span class="prop-key" style="white-space:nowrap;">render-month</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 指定渲染日期，如 [2018, 8] |
| <span class="prop-key" style="white-space:nowrap;">start-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 起始日期，格式为 `YYYY-MM-dd` |
| <span class="prop-key" style="white-space:nowrap;">end-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 结束日期，格式为`YYYY-MM-dd` |
| <span class="prop-key" style="white-space:nowrap;">show-last-month</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示上个月的日期 |
| <span class="prop-key" style="white-space:nowrap;">show-next-month</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示下个月的日期 |
| <span class="prop-key" style="white-space:nowrap;">highlight-weekend</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否高亮周末 |
| <span class="prop-key" style="white-space:nowrap;">return-six-rows</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否总是渲染6行日期 |
| <span class="prop-key" style="white-space:nowrap;">hide-header</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否隐藏日历头部 |
| <span class="prop-key" style="white-space:nowrap;">hide-week-list</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否隐藏星期列表 |
| <span class="prop-key" style="white-space:nowrap;">replace-text-list</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 替换列表，可以将默认的日期换成文字，比如今天的日期替换成今，{'TODAY':'今'} |
| <span class="prop-key" style="white-space:nowrap;">weeks-list</span> | <span class="type type-array">Array</span> | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | <span style="font-size:12px;white-space:nowrap;"></span> | 星期列表，从周日开始 |
| <span class="prop-key" style="white-space:nowrap;">render-function</span> | <span class="type type-function">Function</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性) |
| <span class="prop-key" style="white-space:nowrap;">render-on-value-change</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false |
| <span class="prop-key" style="white-space:nowrap;">disable-past</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 禁止选择过去的日期，该选项可以与 start-date 同时使用 |
| <span class="prop-key" style="white-space:nowrap;">disable-future</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 禁止选择未来的日期，该选项可以 end-date 同时使用 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/inline-calendar">Demo page</a>





---

### Keyboard
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/keyboard/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/keyboard" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/keyboard" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Keyboard.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Keyboard } from 'cvux'
```

`keyboard`是一个键盘组件，主要用于含有车牌输入、VIN码输入时所用到的键盘


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | provinces | <span style="font-size:12px;white-space:nowrap;"></span> | 即keyboard的`type`属性，目前支持 `alphanumeric`,`provinces` |
| <span class="prop-key" style="white-space:nowrap;">show</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">handle-value</span> |   (`value`) | 键盘的click事件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">handle-delete</span> |   (`value`) | 键盘删除键click事件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | 键盘显示时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | 键盘隐藏时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/keyboard">Demo page</a>





---

### Picker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/picker/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/picker" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/picker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Picker.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Picker } from 'cvux'
```


<p class="warning">
  请确保列表项的`value`值是字符串，使用数字会出错。
  <br />
  如果你的业务接口返回数字值为数字，需要你先处理成字符串；同样，获取到值时为字符串，你需要自己转换成数字。
</p>

非联动情况下，列表数据格式示例：

``` js
// data
[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']]

// 或者使用 name => value 的形式
[[{
  name: '2019届5班',
  value: '1'
}, {
  name: '2019届4班',
  value: '2'
}]]

// value
['小米', '小米1']
```

联动时，列表数据格式示例：

``` js
// data
[{
  name: '中国',
  value: 'china',
  parent: 0
}, {
  name: '美国',
  value: 'USA',
  parent: 0
}, {
  name: '广东',
  value: 'china001',
  parent: 'china'
}, {
  name: '广西',
  value: 'china002',
  parent: 'china'
}, {
  name: '美国001',
  value: 'usa001',
  parent: 'USA'
}, {
  name: '美国002',
  value: 'usa002',
  parent: 'USA'
}, {
  name: '广州',
  value: 'gz',
  parent: 'china001'
}, {
  name: '深圳',
  value: 'sz',
  parent: 'china001'
}, {
  name: '广西001',
  value: 'gx001',
  parent: 'china002'
}, {
  name: '广西002',
  value: 'gx002',
  parent: 'china002'
}, {
  name: '美国001_001',
  value: '0003',
  parent: 'usa001'
}, {
  name: '美国001_002',
  value: '0004',
  parent: 'usa001'
}, {
  name: '美国002_001',
  value: '0005',
  parent: 'usa002'
}, {
  name: '美国002_002',
  value: '0006',
  parent: 'usa002'
}]
```


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用 `v-model` 绑定 |
| <span class="prop-key" style="white-space:nowrap;">data</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选项列表数据 |
| <span class="prop-key" style="white-space:nowrap;">columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 指定联动模式下的列数，当不指定时表示非联动 |
| <span class="prop-key" style="white-space:nowrap;">fixed-columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 指定显示多少列，隐藏多余的 |
| <span class="prop-key" style="white-space:nowrap;">id</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 列表元素的id, ssr时需要指定 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | 选择值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/picker">Demo page</a>





---

### PopupPicker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/popup-picker/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/popup-picker" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/popup-picker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/PopupPicker.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { PopupPicker } from 'cvux'
```

<p class="tip">
  其他选项与`picker`一致
</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model绑定` |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">cancel-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 弹窗的取消文字 |
| <span class="prop-key" style="white-space:nowrap;">confirm-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 弹窗的确认文字 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 提示文字 |
| <span class="prop-key" style="white-space:nowrap;">show-name</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示文字值而不是key |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | Cell的描述文字 |
| <span class="prop-key" style="white-space:nowrap;">show</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 显示 (支持.sync修饰 next) |
| <span class="prop-key" style="white-space:nowrap;">id</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | picker元素需要的id |
| <span class="prop-key" style="white-space:nowrap;">valueTextAlign</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 值对其的方式 |
| <span class="prop-key" style="white-space:nowrap;">columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 指定联动模式下的列数，当不指定时表示非联动 |
| <span class="prop-key" style="white-space:nowrap;">fixed-columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 指定显示多少列，隐藏多余的 |
| <span class="prop-key" style="white-space:nowrap;">show-second-name</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> | 指定显示文字的第二列值，不能与show-name同时设置 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/popup-picker">Demo page</a>





---

### Radio
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/radio/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/radio" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/radio" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Radio.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Radio } from 'cvux'
```


```html
  <group>
    <radio title="title" :options="options" v-model="value"></radio>
  </group>
```
`options`可以为简单数组，也可以为key=>value形式键值对

``` js
const options = [ 'China', 'Japan' ]

const options2 = [{
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '001',
  value: 'radio001'
}, {
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '002',
  value: 'radio002'
}]
```

<p class="tip">`radio`只能在`Group`中使用</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可选列表，可以用字符串组成的数组或者 `key=>value` 的形式 |
| <span class="prop-key" style="white-space:nowrap;">fill-mode</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否可填写 |
| <span class="prop-key" style="white-space:nowrap;">fill-placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可填写时的提示文字 |
| <span class="prop-key" style="white-space:nowrap;">fill-label</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 可填写时的label文字 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/radio">Demo page</a>





---

### Search
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/search/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/search" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/search" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Search.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Search } from 'cvux'
```

`search`是一个搜索框组件


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;">v1.3.0</span> | 搜索框的placeholder |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;">v1.3.0</span> | 搜索值 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-blur</span> |   &nbsp; | 失去焦点时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-focus</span> |   &nbsp; | 获取焦点时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   &nbsp; | 搜索值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-search</span> |   &nbsp; | 点击搜索icon时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-clear-icon</span> |   &nbsp; | 点击清除的icon时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/search">Demo page</a>





---

### SelectorList
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/selector-list/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/selector-list" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/selector-list" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/SelectorList.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { SelectorList } from 'cvux'
```

`SelectorList`可用于选择用户角色权限展示，以及模糊搜索，同时支持选择单人和多人（具备 radio 和 checkbox 特征）


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | 控制组件显示状态，建议用 v-model 双向绑定 |
| <span class="prop-key" style="white-space:nowrap;">checked</span> | <span class="type type-string">String</span><br><span class="type type-number">Number</span><br><span class="type type-array">Array</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | 当前选中人员id，传入 String 或 Number 选择单个，传入 Array 则选择多个，建议使用 .sync 完成数据绑定，否则需要在 commit 事件中手动设置其值 |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> | - | <span style="font-size:12px;white-space:nowrap;"></span> | 当前选中人员名字，建议使用 .sync 完成数据绑定，否则需要在 commit 事件中手动设置其值 |
| <span class="prop-key" style="white-space:nowrap;">count</span> | <span class="type type-number">Number</span> | 10 | <span style="font-size:12px;white-space:nowrap;"></span> | 限制可选数量，仅在 checked 属性为 Array 时有效 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> | 请先让行政经理把门店人员添加到系统中 | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">roleList</span> | <span class="type type-array">Array</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | 角色列表 |
| <span class="prop-key" style="white-space:nowrap;">idKey</span> | <span class="type type-string">String</span> | id | <span style="font-size:12px;white-space:nowrap;"></span> | 角色 id 字段名 |
| <span class="prop-key" style="white-space:nowrap;">nameKey</span> | <span class="type type-string">String</span> | name | <span style="font-size:12px;white-space:nowrap;"></span> | 角色 名字 字段名 |
| <span class="prop-key" style="white-space:nowrap;">roleKey</span> | <span class="type type-string">String</span> | roles | <span style="font-size:12px;white-space:nowrap;"></span> | 角色 权限 字段名 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">commit</span> |   (`checked`, `name`) | 当点击提交按钮时触发该事件，参数是 checked 和 name | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/selector-list">Demo page</a>





---

### Selector
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/selector/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/selector" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/selector" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Selector.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Selector } from 'cvux'
```

```html
  <group>
    <selector title="title" v-model="value"></selector>
  </group>
```
<p class="tip">`selector`只能在`Group`中使用</p>
<p class="warning"> 在`iOS`上，如果没有指定`placeholder`也没有指定`value`，会出现弹出选择框时默认选中第一个值，但是确定后依然没有选中的情况。 <br> 因此对于`iOS`，组件内部在列表项前面增加了一个空的`option`，强制用户滑动选择一次以避免上面的问题。 </p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-number">Number</span><br><span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用v-model绑定 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">direction</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选项对齐方式 |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 选项列表，可以为简单数组，或者 `{ key: KEY, value: VALUE }` 结构的键值对数组。当使用键值对时，返回的`value`为`key`的值。 |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单的name名字 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 提示文字 |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否不可选择 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | 值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/selector">Demo page</a>





---

### XAddress
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-address/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-address" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-address" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XAddress.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
&nbsp;
```

```html
  <group>
    <x-address title="title" v-model="value"></x-address>
  </group>
```
import { XAddress } from 'vux'


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">raw-value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 指定初始化时绑定的数据是否为文本(即省市名，而不是id)类型，即对于非id值组件内部会转换为id。如果是异步设置value，只能使用id赋值。 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单标题 |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值, 使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">list</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 地址列表, 可以引入内置地址数据或者用自己的数据，但是需要按照一致的数据结构。 |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题下的描述 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 没有值时的提示文字 |
| <span class="prop-key" style="white-space:nowrap;">hide-district</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否隐藏区，即只显示省份和城市 |
| <span class="prop-key" style="white-space:nowrap;">value-text-align</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | value 对齐方式(text-align) |
| <span class="prop-key" style="white-space:nowrap;">show-second-name</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> | 指定显示文字的第二列值，不能与show-name同时设置 |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   true或者false | 关闭后触发，当非确定时，参数为false，反之为true | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | 显示时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   改变地址的值，是一个Object对象 | 值改变的时候触发，参数为改变的值`{city:"上海市市辖区",cityCode:"310100",district:"黄浦区",districtCode:"310101",province:"上海市",provinceCode:"310000"}` | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-address">Demo page</a>





---

### XButton
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-button/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-button" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-button" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XButton.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XButton } from 'cvux'
```


<p class="warning">
 按照`Vue`[文档](https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件)，在组件上绑定点击事件请使用`@click.native`。
</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | default | <span style="font-size:12px;white-space:nowrap;"></span> | 按钮类型，可选值为 `default,primary,warn` |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否不可点击 |
| <span class="prop-key" style="white-space:nowrap;">text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 按钮文字，同默认slot |
| <span class="prop-key" style="white-space:nowrap;">mini</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否为mini类型，即小尺寸的按钮 |
| <span class="prop-key" style="white-space:nowrap;">plain</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否是plain样式，没有背景色 |
| <span class="prop-key" style="white-space:nowrap;">action-type</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `button`的type属性，默认为浏览器默认(submit)，可选为 `submit` `button` `reset` |
| <span class="prop-key" style="white-space:nowrap;">show-loading</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 显示加载图标 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 按钮文字 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-button">Demo page</a>





---

### XInput
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-input/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-input" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-input" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XInput.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XInput } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | text | <span style="font-size:12px;white-space:nowrap;"></span> | 即input的`type`属性，目前支持 `text`,`number`,`email`,`password`,`tel` |
| <span class="prop-key" style="white-space:nowrap;">is-type</span> | <span class="type type-string">String</span><br><span class="type type-function">Function</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 内置验证器，支持`email`,`china-name`,`china-mobile`, 同样也支持直接传函数, 需要同步返回一个对象`{valid:true}`或者`{valid:false, msg:错误信息}` |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否必值，如果不禁用验证，当没有填写时会在右侧显示错误icon |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label文字 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder 提示 |
| <span class="prop-key" style="white-space:nowrap;">show-clear</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示清除icon |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最小输入字符限制 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最大输入字符限制，等同于`maxlength`，达到限制到不能再输入 |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否禁用填写 |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 同input的标准属性readonly |
| <span class="prop-key" style="white-space:nowrap;">debounce</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `debounce`用以限制`on-change`事件触发。如果你需要根据用户输入做`ajax`请求，建议开启以节省无效请求和服务器资源，单位为毫秒 |
| <span class="prop-key" style="white-space:nowrap;">text-align</span> | <span class="type type-string">String</span> | left | <span style="font-size:12px;white-space:nowrap;"></span> | 值对齐方式 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">label</span> | 用于自定义`label`(即 title)部分内容，比如使用`icon` | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">restricted-label</span> | 用于自定义`label`部分，和`slot=label`不同的是，该slot宽度受到父组件`group`的限制 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">right</span> | 用以在输入框右边显示内容，比如验证码图片，单位，切换密码显示方式等 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-blur</span> |   `(value, $event)` | input的`blur`事件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-focus</span> |   `(value, $event)` | input的`focus`事件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-enter</span> |   `(value, $event)` | input输入完成后点击`enter(确认)`事件 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | 输入值变化时触发。如果你使用了`debounce`，那么触发将不会是实时的。 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-clear-icon</span> |   &nbsp; | 支持事件 on-click-clear-icon | <span style="font-size:12px;white-space:nowrap;">v2.1.15</span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">focus</span> |   &nbsp; | 手动获得焦点 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">blur</span> |   &nbsp; | 手动设置 input 失去焦点 |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-input">Demo page</a>





---

### XNumber
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-number/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-number" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-number" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XNumber.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XNumber } from 'cvux'
```


```html
  <group>
    <x-number title="title" v-model="value"></x-number>
  </group>
```


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最小值 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 最大值 |
| <span class="prop-key" style="white-space:nowrap;">step</span> | <span class="type type-number">Number</span> | 1 | <span style="font-size:12px;white-space:nowrap;"></span> | 步长 |
| <span class="prop-key" style="white-space:nowrap;">fillable</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否可填写 |
| <span class="prop-key" style="white-space:nowrap;">width</span> | <span class="type type-string">String</span> | 50px | <span style="font-size:12px;white-space:nowrap;"></span> | 输入框宽度 |
| <span class="prop-key" style="white-space:nowrap;">button-style</span> | <span class="type type-string">String</span> | square | <span style="font-size:12px;white-space:nowrap;"></span> | 按钮样式，可选值为`square`或者`round` |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | 按钮部分位置，默认在右边(right)，可选值为`left`和`right` |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-number">Demo page</a>





---

### XSwitch
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-switch/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-switch" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-switch" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XSwitch.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XSwitch } from 'cvux'
```


```html
  <group>
    <x-switch title="title" v-model="value"></x-switch>
  </group>
```


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label文字 |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否不可点击 |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值, 使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标签下文字 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-switch">Demo page</a>





---

### XTextarea
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-textarea/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-textarea" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-textarea" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XTextarea.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XTextarea } from 'cvux'
```


```html
  <group>
    <x-textarea title="title" v-model="value"></x-textarea>
  </group>
```

<p class="tip">`x-textarea`只能在`Group`中使用</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">show-counter</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示计数 |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 最大长度限制 |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单值, 使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 表单名字 |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 没有值时的提示文字 |
| <span class="prop-key" style="white-space:nowrap;">rows</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | textarea 标准属性 rows |
| <span class="prop-key" style="white-space:nowrap;">cols</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | textarea 标签属性 cols |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 高度 |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | textarea 标签属性 readonly |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | 表单值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-textarea">Demo page</a>



