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

---

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

``` js
import { Actionsheet } 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-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示, 使用 v-model 绑定变量 |
| <span class="prop-key" style="white-space:nowrap;">show-cancel</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;">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;">theme</span> | <span class="type type-string">String</span> | ios | <span style="font-size:12px;white-space:nowrap;"></span> | 菜单风格，可选值为['ios','android'] |
| <span class="prop-key" style="white-space:nowrap;">menus</span> | <span class="type type-object">Object</span><br><span class="type type-array">Array</span> | {} | <span style="font-size:12px;white-space:nowrap;"></span> | 菜单项列表，举例：`{menu1: '删除'}`，如果名字上带有`.noop`表明这是纯文本(HTML)展示，不会触发事件，用于展示描述或者提醒。<br>从`v2.1.0`开始支持数组类型的菜单，可自定义键值，见下面说明。 |
| <span class="prop-key" style="white-space:nowrap;">close-on-clicking-mask</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;">close-on-clicking-menu</span> | <span class="type type-boolean">Boolean</span> | true | <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-click-menu</span> |   (menuKey, menuItem) | 点击菜单时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-menu-{menuKey}</span> |   (menuKey) | 点击事件的快捷方式, `menuKey`与`label`的值有关。举例：如果你有一个菜单名字为`delete`, 那么你可以监听 `on-click-menu-delete` | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-menu-cancel</span> |   &nbsp; | 点击取消菜单时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-mask</span> |   &nbsp; | 点击遮罩时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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


支持数组类型的菜单。

`label`: 菜单名字，支持文字及`html`。

`value`: 英文字符，表示触发事件的名字，如果不设置不会触发`on-click-menu`事件。

`type`: 类型，可选值如下

  - `primary` 主色
  - `warn` 警告色
  - `disabled` 不可操作，灰色。点击时不会关闭
  - `info ` 信息提示，点击时不会关闭。作用同对象类型的`key.noop`。

``` js
[{
  label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
  type: 'info'
}, {
  label: 'Primary',
  type: 'primary',
  value: 'primary'
}, {
  label: 'Warn',
  type: 'warn'
}, {
  label: 'Disabled',
  type: 'disabled'
}, {
  label: 'Default'
}]
```






---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | 显示的文字 |


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





---

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

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

<span class="vux-component-name">ButtonTab</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-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 当前选中索引值，从0开始，使用 `v-model` 绑定 |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | 高度值, 单位为像素 |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</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> |   (index) | 当前按钮点击时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

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

<span class="vux-component-name">ButtonTab</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-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 当前选中索引值，从0开始，使用 `v-model` 绑定 |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | 高度值, 单位为像素 |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</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> |   (index) | 当前按钮点击时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

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


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

<p class="tip">`calendar`只能在`Group`中使用
<br>
 除了`title`和 `value`, 其他`props`和`inline-calendar`完全一致。
</p>

<p class="tip">当绑定值为数组时，日历将为多选模式</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 绑定。当值为空时，为单选；当值为[]时，为多选；设置值为'TODAY'可快捷选取当前日期。`placeholder`只有在值为空或[]时显示。 |
| <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> | 占位提示文字 |

<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> |
| <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/calendar">Demo page</a>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header.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;">footer.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;">footer.link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 底部链接，普通url或者v-link参数 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | 头部位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">content</span> | 中间主体位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</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-click-footer</span> |   &nbsp; | 点击底部时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-header</span> |   &nbsp; | 点击头部时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### 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>





---

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

``` js
import { ColorPicker } 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> | 表单值 |
| <span class="prop-key" style="white-space:nowrap;">colors</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;">size</span> | <span class="type type-string">String</span> | large | <span style="font-size:12px;white-space:nowrap;"></span> | 按钮大小，可选值 large, middle, small |


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





---

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

``` js
import { Countdown } 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-number">number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 时间，秒为单位 |
| <span class="prop-key" style="white-space:nowrap;">start</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否开始计数 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/countdown">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>





---

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

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

<p class="tip">
不支持配置分割线颜色，因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色，请使用<a href="#" jump-to-id="loadmore">`load-more`</a>组件。
</p>

``` html
<divider>我是有底线的</divider>
```


<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/divider">Demo page</a>





---

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

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-number">Number</span> | 8 | <span style="font-size:12px;white-space:nowrap;"></span> | 间隙像素大小（px） |
| <span class="prop-key" style="white-space:nowrap;">orient</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | 排布方向，可选['horizontal', 'vertical'] |
| <span class="prop-key" style="white-space:nowrap;">justify</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`justify-content`属性 |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`align-items`属性 |
| <span class="prop-key" style="white-space:nowrap;">wrap</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`flex-wrap`属性 |
| <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> | `flex`的`flex-direction`属性 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | `flexbox-item`的内容插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">span</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 占用宽度，如果不设置，所有flexbox-item将平分 |
| <span class="prop-key" style="white-space:nowrap;">order</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`order`属性 |

<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/flexbox">Demo page</a>





---

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

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-number">Number</span> | 8 | <span style="font-size:12px;white-space:nowrap;"></span> | 间隙像素大小（px） |
| <span class="prop-key" style="white-space:nowrap;">orient</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | 排布方向，可选['horizontal', 'vertical'] |
| <span class="prop-key" style="white-space:nowrap;">justify</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`justify-content`属性 |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`align-items`属性 |
| <span class="prop-key" style="white-space:nowrap;">wrap</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`flex-wrap`属性 |
| <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> | `flex`的`flex-direction`属性 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | `flexbox-item`的内容插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">span</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 占用宽度，如果不设置，所有flexbox-item将平分 |
| <span class="prop-key" style="white-space:nowrap;">order</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex`的`order`属性 |

<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/flexbox">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>





---

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

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

<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> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 图标名字，可选值见demo |
| <span class="prop-key" style="white-space:nowrap;">is-msg</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否用作消息提示页面图标，图标尺寸会使用93px |


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

``` html
<icon type="success"></icon>
<icon type="info"></icon>
<icon type="info-circle"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="waiting-circle"></icon>
<icon type="safe-success"></icon>
<icon type="safe-warn"></icon>
<icon type="success-circle"></icon>
<icon type="success-no-circle"></icon>
<icon type="circle"></icon>
<icon type="download"></icon>
<icon type="cancel"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="success" is-msg></icon>
<icon type="info" is-msg></icon>
<icon type="safe-success" is-msg></icon>
<icon type="safe-warn" is-msg></icon>
```






---

### 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>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | 显示状态，在 v2.5.7 前使用`v-model`绑定，后面直接使用 `:show` 绑定 |
| <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> | 提示文字 |
| <span class="prop-key" style="white-space:nowrap;">position</span> | <span class="type type-string">String</span> | fixed | <span style="font-size:12px;white-space:nowrap;"></span> | 定位方式，默认为`fixed`，在100%的布局下用`absolute`可以避免抖动 |
| <span class="prop-key" style="white-space:nowrap;">transition</span> | <span class="type type-string">String</span> | vux-mask | <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/loading">Demo page</a>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">color</span> | <span class="type type-string">String</span> | 0, 0, 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 遮罩颜色，rgb值，'0, 0, 0' |
| <span class="prop-key" style="white-space:nowrap;">opacity</span> | <span class="type type-number">Number</span> | 0.5 | <span style="font-size:12px;white-space:nowrap;"></span> | 遮罩透明度 |
| <span class="prop-key" style="white-space:nowrap;">fullscreen</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="prop-key" style="white-space:nowrap;">content</span> | 遮罩上方内容，一般显示标题消息 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</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;">footer</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 尾部配置，`{url: url, title: title}` |
| <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> | 内容列表，`[{title, desc, src, fallbackSrc, meta:{source,date,other}}]` |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | 1 | <span style="font-size:12px;white-space:nowrap;"></span> | 布局类型，可选值 ['1', '2', '3', '4', '5'] |

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

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-click-header</span> |   &nbsp; | 点击头部时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-item</span> |   `(item)` | 点击内容列表时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-footer</span> |   &nbsp; | 点击尾部时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/panel">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>





---

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

``` js
import { Popup } 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-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 是否关闭，使用`v-model`绑定 |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | auto | <span style="font-size:12px;white-space:nowrap;"></span> | 高度，设置`100%`为整屏高度。当 position 为 top 或者 bottom 时有效。 |
| <span class="prop-key" style="white-space:nowrap;">hide-on-blur</span> | <span class="type type-boolean">Boolean</span> | true | <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-hide</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> |
| <span class="prop-key" style="white-space:nowrap;">on-first-show</span> |   &nbsp; | 第一次显示时触发，可以在该事件回调里初始化数据或者界面 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

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


list的数据示例如图：

``` js
[{
  src: 'https://placekitten.com/800/400',
  w: 600,
  h: 400
},
{
  src: 'https://placekitten.com/1200/900',
  w: 1200,
  h: 900
}]
```

<p class="warning">注意在 v2.4.0 之前 w 和 h 都必须填写</p>

显示特定index的图片，使用`ref`:

``` js
this.$refs.previewer.show(index)
```

<p class="warn">注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应</p>


``` html
<previewer ref="previewer" :list="previewerList" :options="options">
  <template slot="button-after">
    <span class="previewer-delete-icon-box">
      <img src="../assets/previewer_delete_icon.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="removeImg">
    </span>
  </template>
</previewer>
```


``` js
options: {
  isClickableElement: function (el) {
    return /previewer-delete-icon/.test(el.className)
  }
}
```


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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;">options</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `photoswipe`的设置 |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/previewer">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>





---

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

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

<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;">header</span> | 头部内容 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | 底部内容 | <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;">computeHeight</span> |   &nbsp; | 基于 header 和 footer 的高度，动态计算 scroller 区域高度 |<span style="font-size:12px;white-space:nowrap;"></span> | 


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

<p class="tip">
如需动态控制 header 或 footer 显示状态，需要在 dom 更新完毕之后，调用组件的 computeHeight 方法重新计算 scroller 区域高度。
</p>

``` js
this.$nextTick(() => {
  this.$refs.scrollerPage.computeHeight()
})
```






---

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

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

<p class="warning">
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。
<br>
建议使用第三方相关组件，相关 issue 将不会处理。
</p>

<p class="warning">
`Scroller`的内容必须是一个`div`，并且只能有一个`div`
<br>
`Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。
<br>
<br>
默认高度为整个视口高度，如果你加了`x-header`，那么你需要减去一个`x-header`的高度: `height="-46"`

<br>
<br>
请确保在你的数据更新后进行`reset`操作(参考下面文档)，如果你做了`reset`还有问题再开`issue`并附上代码，否则将`绝对不会被处理`。
</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-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | viewport height | <span style="font-size:12px;white-space:nowrap;"></span> | 容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如`height="-40"`。（推荐使用 ScrollerPage 组件，避免高度计算的麻烦，组件使用参考其 demo） |
| <span class="prop-key" style="white-space:nowrap;">lock-x</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 锁定X方向 |
| <span class="prop-key" style="white-space:nowrap;">lock-y</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 锁定Y方向 |
| <span class="prop-key" style="white-space:nowrap;">scrollbar-x</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;">scrollbarY</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;">bounce</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;">use-pulldown</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;">use-pullup</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;">pulldown-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | 下拉组件配置 |
| <span class="prop-key" style="white-space:nowrap;">pullup-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | 上拉组件配置 |
| <span class="prop-key" style="white-space:nowrap;">scroll-bottom-offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> | 在距离底部多长距离时触发事件 on-scroll-bottom |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | scroller 内容，必须是一个 `div` 元素 | <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-scroll</span> |   `(position)` | 容器滚动时触发，参数为`top`和`left`位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-bottom</span> |   &nbsp; | 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值 | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> |
| <span class="prop-key" style="white-space:nowrap;">on-pulldown-loading</span> |   &nbsp; | 用户触发下拉刷新状态，监听该事件以获取加载新数据 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-pullup-loading</span> |   &nbsp; | 用户触发上拉加载状态，监听该事件以加载新数据 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-start</span> |   &nbsp; | 滚动开始时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-end</span> |   &nbsp; | 滚动结束时触发 | <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;">reset</span> |   `(position, duration, easing)` | 在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n) |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePullup</span> |   &nbsp; | 设置上拉刷新操作完成，在数据加载后执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">disablePullup</span> |   &nbsp; | 禁用上拉刷新，在没有更多数据时执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">enablePullup</span> |   &nbsp; | 启用上拉刷新插件 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePulldown</span> |   &nbsp; | 设置下拉刷新操作完成，在数据加载后执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 


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

pulldown 默认配置:

``` js
{
  content: 'Pull Down To Refresh',
  height: 60,
  autoRefresh: false,
  downContent: 'Pull Down To Refresh',
  upContent: 'Release To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pulldown-'
}
```

pullup 默认配置:

``` js
{
  content: 'Pull Up To Refresh',
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  downContent: 'Release To Refresh',
  upContent: 'Pull Up To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pullup-'
}
```

<span class="vux-qa">QA 如何更新数据</span>

如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset()
})
```

如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset({
    top: 0
  })
})
```

<span class="vux-qa">QA 如何设置pullup完成</span>

方法1，直接调用on-pullup-loading绑定事件的回调，传参数time 表示延时time执行，不传参数表示立即执行

``` js
<scroller 
  lock-x scrollbar-y 
  use-pullup 
  @on-pullup-loading="loadMore">
</scroller>
...
...
methods: {
  loadMore(done) {
    ...
    done(100)
  } 
}
```
方法2，直接调用ref的`donePullup`方法

``` js
this.$refs.demo2.donePullup()
```

方法3，绑定value, 重置状态

<p class="tip">自定义pullup模板同样是用v-model来绑定以获取状态变化</p>

``` html
<scroller v-model="status"></scroller>
```

``` js
data () {
  return {
    status: {
      pullupStatus: 'default'
    }
  }
}
```

```
// 重置状态为default
this.status.pullupStatus = 'default
```

<span class="vux-qa">QA 如何设置pulldown完成</span>

参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。

<span class="vux-qa">QA 如何禁用或者启用pullup</span>

在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`

反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`

<span class="vux-qa">启用keep-alive后滚动有问题</span>

需要在调用Scroller的页面上在 hook: `activated`上执行`reset`

``` js
activated () {
  this.$refs.scroller.reset()
}
```






---

### 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>





---

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

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

<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> | ios | <span style="font-size:12px;white-space:nowrap;"></span> | 图标类型 |


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





---

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

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


```html
  <steps :steps="steps" :fr-key="'operated_at'">
    <div slot-scope="{ step }" v-if="step.operator_name">
      <p>经手：{{step.operator_name}}（{{step.role_names}}）</p>
    </div>
  </steps>
```
`steps` 必须是一个数组，每项必须包含字段title显示标题和status，显示四种状态: 没开始 等待中，已通过，已拒绝

`fr-key`: 必须是string, 自定义动态显示右上角的内容

``` js
const steps = [{
  status: 'pending_review',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}, {
  status: 'approved',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}, {
  status: 'rejected',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}]
```


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">steps</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 审核流程列表, 每项必须包含字段title显示标题和status |
| <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;">frKey</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/steps">Demo page</a>





---

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

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

<p class="tip">在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。
<br>
<br>
你也可以设置禁用原生支持检测以获得相同的效果：`:check-sticky-support="false"`
</p>

如果你没有使用`100%`的布局，也没有头部可以直接这样使用
``` html
<sticky>
  <div>Blabla</div>
</sticky>
```

如果你像demo一样使用`view-box`和`x-header`，那么需要这样：

``` html
<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>
```

建议外围加一个`div`高度为内容高度，这样可以避免当定位为`sticky`时下面的元素会突然向上走。

``` html
<div style="height:44px;">
  <sticky scroll-box="vux_view_box_body" :offset="46">
    <div>Blabla</div>
  </sticky>
</div>
```

<p class="warning">
请不要直接照抄 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`，请按照实际情况来设定。
</p>


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">scroll-box</span> | <span class="type type-string">String</span> | window | <span style="font-size:12px;white-space:nowrap;"></span> | 滚动容器，默认为`window`，如果你使用了viewbox，那么你需要指定容器id：`vux_view_box_body` |
| <span class="prop-key" style="white-space:nowrap;">check-sticky-support</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否检测当前浏览器是否支持sticky特性，禁用则在`iPhone`设置上也使用`scroll`实现 |
| <span class="prop-key" style="white-space:nowrap;">offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 距离顶部高度，在存在头部（如使用了`x-header`）的情况下需要设置一个距离 |

<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/sticky">Demo page</a>





---

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

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

<p class="tip">
  `list`为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用`swiper-item`组件来自定义。
  <br>
  `list` 格式如下
  <br>

  ``` js
  [{
    url: 'javascript:',
    img: 'https://static.vux.li/demo/1.jpg',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: 'https://static.vux.li/demo/5.jpg',
    title: '送你一次旅行',
    fallbackImg: 'https://static.vux.li/demo/3.jpg'
  }]
  ```

</p>
<p class="warning">
不要在`swiper`里嵌套`scroller`，在`web`上过于复杂化而且手势会有冲突，相关`Issue`将不会处理。
<br>
<br>
需要注意的是，在使用 `swiper-item` 而非 `list` 图片列表时，如果只有两项，将无法实现 `loop` 循环播放。
<br>
<br>
该组件场景是固定高度的内容列表，不支持为不同 swiper-item 设置不同高度。
<br>
<br>
如果确实需要设置不同高度，可以通过 ref 获取 swiper, 通过 this.$refs.swiper.xheight = '100px' 设置。 切记，需要放在 $nextTick 中执行。
</p>


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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;">direction</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | 方向 |
| <span class="prop-key" style="white-space:nowrap;">show-dots</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-desc-mask</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;">dots-position</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | 提示点位置 |
| <span class="prop-key" style="white-space:nowrap;">dots-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 提示className |
| <span class="prop-key" style="white-space:nowrap;">auto</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;">loop</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;">interval</span> | <span class="type type-number">Number</span> | 3000 | <span style="font-size:12px;white-space:nowrap;"></span> | 轮播停留时长 |
| <span class="prop-key" style="white-space:nowrap;">threshold</span> | <span class="type type-number">Number</span> | 50 | <span style="font-size:12px;white-space:nowrap;"></span> | 当滑动超过这个距离时才滑动 |
| <span class="prop-key" style="white-space:nowrap;">duration</span> | <span class="type type-number">Number</span> | 300 | <span style="font-size:12px;white-space:nowrap;"></span> | 切换动画时间 |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | 180px | <span style="font-size:12px;white-space:nowrap;"></span> | 高度值。如果为`100%`宽度并且知道宽高比，可以设置`aspect-ratio`自动计算高度 |
| <span class="prop-key" style="white-space:nowrap;">aspect-ratio</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-moving-distance</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;">v-model</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | index 绑定，使用`v-model`，一般不需要绑定 |

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

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


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





---

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

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


如果需要监听`tab-item`的点击事件并取得索引，请使用`on-item-click`事件:

``` html
<tab>
  <tab-item @on-item-click="handler"></tab-item>
</tab>
```


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">line-width</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | 线条宽度 |
| <span class="prop-key" style="white-space:nowrap;">active-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;">defaultColor</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-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;">bar-active-color</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 设置底部`bar`颜色，该颜色也可以通过`less`变量`@tab-bar-active-color`设置。 |
| <span class="prop-key" style="white-space:nowrap;">animate</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 切换时是否需要动画 |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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;">active-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 当前项选中时的class |


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





---

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

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


如果需要监听`tab-item`的点击事件并取得索引，请使用`on-item-click`事件:

``` html
<tab>
  <tab-item @on-item-click="handler"></tab-item>
</tab>
```


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">line-width</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | 线条宽度 |
| <span class="prop-key" style="white-space:nowrap;">active-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;">defaultColor</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-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;">bar-active-color</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 设置底部`bar`颜色，该颜色也可以通过`less`变量`@tab-bar-active-color`设置。 |
| <span class="prop-key" style="white-space:nowrap;">animate</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 切换时是否需要动画 |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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;">active-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 当前项选中时的class |


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





---

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

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

支持简单模式，即不指定`icon`，`label`将垂直居中显示。

<p class="warning">
默认定位为 `absolute`，适用于 `100%页面布局`，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 `position: fixed`
</p>


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 图标的class名 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | tabbar主体内容，只允许tabbar-item | <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-index-change</span> |   &nbsp; | value 值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否选中当前项，你也可以使用`v-model`来指定选中的`tabbar-item`的`index` |
| <span class="prop-key" style="white-space:nowrap;">badge</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-dot</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;">link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 链接，可以为普通url或者用`vue-link`的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转 |
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的 |

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

|name|description|version|
|-------|-------|-------|
| <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;">label</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-item-click</span> |   &nbsp; | 点击菜单项时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

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

支持简单模式，即不指定`icon`，`label`将垂直居中显示。

<p class="warning">
默认定位为 `absolute`，适用于 `100%页面布局`，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 `position: fixed`
</p>


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 图标的class名 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | tabbar主体内容，只允许tabbar-item | <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-index-change</span> |   &nbsp; | value 值变化时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否选中当前项，你也可以使用`v-model`来指定选中的`tabbar-item`的`index` |
| <span class="prop-key" style="white-space:nowrap;">badge</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-dot</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;">link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 链接，可以为普通url或者用`vue-link`的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转 |
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的 |

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

|name|description|version|
|-------|-------|-------|
| <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;">label</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-item-click</span> |   &nbsp; | 点击菜单项时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

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

``` js
import { Toast } 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-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示, 使用 v-model 绑定 |
| <span class="prop-key" style="white-space:nowrap;">time</span> | <span class="type type-number">Number</span> | 2000 | <span style="font-size:12px;white-space:nowrap;"></span> | 显示时间 |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | success | <span style="font-size:12px;white-space:nowrap;"></span> | 类型，可选值 success, warn, cancel, text |
| <span class="prop-key" style="white-space:nowrap;">width</span> | <span class="type type-string">String</span> | 7.6em | <span style="font-size:12px;white-space:nowrap;"></span> | 宽度 |
| <span class="prop-key" style="white-space:nowrap;">is-show-mask</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> | 提示内容，支持 html，和默认slot同样功能 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 默认slot, 提示内容 | <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-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/toast">Demo page</a>





---

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

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

```html
  <upload-pic
    :images.sync="formData.images"
    :show-name="imagesConfig.showName"
    :dragable="imagesConfig.dragable"
    :count="imagesConfig.length"
    @upload="ImgUpload"
    @delete="ImgDelete">
    <span class="color_red">*</span>{{finishProveImgConfig.title}}
  </upload-pic>
```

```js
ImgUpload(i) {
  let iamges = this.formData.images
  this.$wechat.imgUpLoad(this, i, iamges, this.imagesConfig.requestUrl)
},
ImgDelete(i) {
  let iamges = this.formData.images
  this.$wechat.imgDelete(i, iamges)
}
```

<p class="tip">
图片上传和删除的方法已整合到vue项目中的this.$wechat对象下，分别为：`this.$wechat.imgUpLoad`和`this.$wechat.imgDelete`
</p>


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">group</span> | <span class="type type-string">String</span> | upload | <span style="font-size:12px;white-space:nowrap;"></span> | 可拖拽模式下分组名称 |
| <span class="prop-key" style="white-space:nowrap;">showName</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;">imgKey</span> | <span class="type type-string">String</span> | src | <span style="font-size:12px;white-space:nowrap;"></span> | images每项读取图片的属性名 |
| <span class="prop-key" style="white-space:nowrap;">count</span> | <span class="type type-string">String</span><br><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;">optional</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;">dragable</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;">bgUrl</span> | <span class="type type-string">String</span> | ../../assets/uploadpic/default.png | <span style="font-size:12px;white-space:nowrap;"></span> | 上传图片的背景 |
| <span class="prop-key" style="white-space:nowrap;">images</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 上传的图片列表，格式为[{ src:'', name: '左前方', code: 'left_front' }], 详细属性分别为：src(图片地址)、name（标题）、name2(子标题)、code(图片代号)、bgUrl(背景图片地址) |

<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;">subname</span> | 多标题的情况下，子标题内容 | <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;">upload</span> |   `(index)` | 图片上传 |<span style="font-size:12px;white-space:nowrap;"></span> | 


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





---

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

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


该组件为`100%高`布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。

在`viewBox`里元素定位为`absolute`，效果等同于`fixed`。

使用时需要设置 html, body 高为100%:

  ``` css
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  ```

 view-box`所有父div`也需要为100%高度：

 ``` html
 <div style="height:100%;">
   <view-box ref="viewBox">
     <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
     <router-view></router-view>
     <tabbar slot="bottom"></tabbar>
   </view-box>
 </div>
 ```

如果你想保存滚动距离，推荐使用`vuex`实现，在特定`path`对`scrollBody`监听`scroll`事件，并获取滚动距离保存到`vuex`的`state`里。示例可以参考vux源码的`App.vue`


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">body-padding-top</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 主体的`padding-top`值，当顶部存在`x-header`等`absolute`定位元素时需要设置 |
| <span class="prop-key" style="white-space:nowrap;">body-padding-bottom</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 主体的`padding-bottom`值，当底部存在`tabbar`等`absolute`定位元素时需要设置 |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | 顶部区域，如果要使用统一的XHeader，可以使用该slot | <span style="font-size:12px;white-space:nowrap;"></span> |
| <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;">bottom</span> | 底部区域，Tabbar可以使用该slot | <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;">scrollTo</span> |   `(top)` | 滚动到指定位置 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollTop</span> |   &nbsp; | 获取当前滚动距离 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollBody</span> |   &nbsp; | 获取滚动`div`, 也可以直接用组件引用的`.$refs.viewBoxBody` |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/view-box">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>





---

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

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

```js
显示一个用户注意到并且点击按钮确认关闭的信息
warning
以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`buttonText`而不是`button-text`。
```js
该组件支持以`plugin`形式调用：
this.$cvux.alert.show({
  title: 'Vux is Cool',
  content: 'Do you agree?',
  onShow: () => {
    console.log('Plugin: I\'m showing')
  },
  onHide: () => {
    console.log('Plugin: I\'m hiding')
  }
})
```
```
 // 隐藏
 this.$vux.alert.hide()
 // 获取显示状态
 this.$cvux.alert.isVisible() // v1.3.4 支持
```


<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;"></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;">button-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;">mask-transition</span> | <span class="type type-string">String</span> | vux-fade | <span style="font-size:12px;white-space:nowrap;"></span> | 遮罩动画 |
| <span class="prop-key" style="white-space:nowrap;">dialog-transition</span> | <span class="type type-string">String</span> | vux-dialog | <span style="font-size:12px;white-space:nowrap;"></span> | 弹窗主体动画 |
| <span class="prop-key" style="white-space:nowrap;">content</span> | <span class="type type-string">string</span> | null | <span style="font-size:12px;white-space:nowrap;">1.3.4</span> | 提示内容，作为 slot:default 的默认内容，如果使用 slot:default, 将会失效 |
| <span class="prop-key" style="white-space:nowrap;">autoCloseTime</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;">1.3.4</span> | 提示自动关闭的时间,ms为单位 |

<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-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/x-alert">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>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | 弹窗是否可见，使用 `v-model` 绑定 |
| <span class="prop-key" style="white-space:nowrap;">mask-transition</span> | <span class="type type-string">String</span> | vux-mask | <span style="font-size:12px;white-space:nowrap;"></span> | 遮罩层动画 |
| <span class="prop-key" style="white-space:nowrap;">dialog-transition</span> | <span class="type type-string">String</span> | vux-dialog | <span style="font-size:12px;white-space:nowrap;"></span> | 弹窗动画 |
| <span class="prop-key" style="white-space:nowrap;">hide-on-blur</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;">scroll</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 【废弃】是否在弹窗上滚动时 body 内容也滚动 |

<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-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/x-dialog">Demo page</a>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">left-options.showBack</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;">left-options.backText</span> | <span class="type type-string">String</span> | Back | <span style="font-size:12px;white-space:nowrap;"></span> | 返回文字 |
| <span class="prop-key" style="white-space:nowrap;">left-options.preventGoBack</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;">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;">transition</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;">right-options.showMore</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="prop-key" style="white-space:nowrap;">left</span> | 左侧部分插槽，在返回文字后，不会影响到原有的图标 | <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-click-more</span> |   &nbsp; | 点击右侧更多时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-back</span> |   &nbsp; | 当left-options.preventGoBack为true,点击左边返回时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-title</span> |   &nbsp; | 点击标题时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-header">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>





---

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">percent</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 进度值，0到100 |
| <span class="prop-key" style="white-space:nowrap;">show-cancel</span> | <span class="type type-boolean">Boolean</span> | true | <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-cancel</span> |   &nbsp; | 点击取消按钮时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-progress">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>



