--- nav: en --- ## form --- ### Cell Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Cell } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | title | String | | | label text | | value | String | | | right text | | inline-desc | String | | | the text below title | | is-link | String | | | if this is a link, if true, there will be an arrow on the right | | primary | String | | | main content area, can be in ['title', 'content'] | Slots |name|description|version| |-------|-------|-------| | default | right area, you can use default slot instead of prop:value so you can use complexed layout | | | value | [deprecated] the same as default slot | | | icon | icon area before title | | | after-title | after title | | | child | the child element of the cell, you can add an element with absolute position | | Demo page --- ### CheckIcon Edit document   Demo page   demo 原始链接   Demo source   ``` js import { CheckIcon } from 'cvux' ``` ` CheckIcon ` is a selected component Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Boolean | false | v1.3.10 | if selected, use :value.sync for two-way data binding | | type | String | unknown | v1.3.10 | style of check icon, can be ['plain'] | Demo page --- ### CheckerItem Edit document   Demo page   demo 原始链接   Demo source   ``` js import { CheckerItem } from 'cvux' ``` `Checker` is a more flexible component than `Radio` and `Checklist`. Checker Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | default-item-class | String | | | default checker-item classname | | selected-item-class | String | | | selected check-item classname | | disabled-item-class | String | | | disabled check-item classname | | type | String | radio | | checker type, should be raido or checkbox | | value | String
Array | | | selected value, use `v-model` for binding | | max | Number | | | max selected number when type = checkbox | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | emits when value is changed | | CheckerItem Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String | | | value of current checker-item | | disabled | Boolean | false | | if current item is disabled | Events |name|params|description|version| |-------|-------|-------|-------| | on-item-click | `(itemValue, itemDisabled)` | emits when current checker-item is clicked | | Demo page --- ### Checker Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Checker } from 'cvux' ``` `Checker` is a more flexible component than `Radio` and `Checklist`. Checker Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | default-item-class | String | | | default checker-item classname | | selected-item-class | String | | | selected check-item classname | | disabled-item-class | String | | | disabled check-item classname | | type | String | radio | | checker type, should be raido or checkbox | | value | String
Array | | | selected value, use `v-model` for binding | | max | Number | | | max selected number when type = checkbox | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | emits when value is changed | | CheckerItem Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String | | | value of current checker-item | | disabled | Boolean | false | | if current item is disabled | Events |name|params|description|version| |-------|-------|-------|-------| | on-item-click | `(itemValue, itemDisabled)` | emits when current checker-item is clicked | | Demo page --- ### Checklist Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Checklist } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Array | | | form value | | title | String | | | title | | required | Boolean | false | | if required | | options | Array | | | options list | | max | Number | | | max selected number | | min | Number | | | min selected number | | random-order | Boolean | false | | if place options in a random order | | check-disabled | Boolean | true | | if disabled item when selectedItems.length === total.length, by using this prop:max no longer works | | label-position | String | right | | label position, can be set to left or right | | disabled | String | | | if disable user from selecting | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | (value) | emits when value changes | | Methods |name|params|description|version| |-------|-------|-------|-------| | getFullValue | | get current value with label | | Demo page --- ### Datetime Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Datetime } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | format | String | YYYY-MM-DD | | date format. Special characters are not supported, for example, YYYY-MM-DD HH:mm:ss | | title | String | | | cell title | | value | String | | | form's value, use `v-model` for binding | | inline-desc | String | | | description of the cell | | placeholder | String | | | placeholder, works when value is empty | | min-year | Number | | | min-year of the form | | max-year | Number | | | max-year of the form | | min-hour | Number | 0 | | min hour | | max-hour | Number | 23 | | max hour | | min-minute | Number | 0 | | min minute | | max-minute | Number | 23 | | max minute | | confirm-text | String | ok(确认) | | confirm button's text | | cancel-text | String | cancel(取消) | | cancel button's text | | clear-text | String | | | custom button's text which shows in the middle of the header | | year-row | String | {value} | | render template for the year column | | month-row | String | {value} | | render template for the month column | | day-row | String | {value} | | render template for the day column | | hour-row | String | {value} | | render template for the hour column | | minute-row | String | {value} | | render template for the minute column | | start-date | String | | | start date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours | | end-date | String | | | end date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours | | required | Boolean | false | | if required | Slots |name|description|version| |-------|-------|-------| | default | trigger element content | | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | $emits when value changes, `(newVal)` | | | on-clear | | $emits when click the button in the middle of the header | | | on-show | | fires when datetime shows | | Demo page --- ### Group Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Group } from 'cvux' ``` `Group` is a special component for wrapping form elements Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | title | String | | | group title | | title-color | String | | | group title's color | | label-width | String | | | common label width for child components | | label-align | String | | | common label text-align for child components | | label-margin-right | String | | | common margin right value for child components | | gutter | String | | | set the marginTop value when there is no title | Slots |name|description|version| |-------|-------|-------| | default | content body for child components | | | title | after-title slot | | Demo page --- ### InlineCalendar Edit document   Demo page   demo 原始链接   Demo source   ``` js import { InlineCalendar } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String
Array | | | calendar value, use `v-modle` for binding. String (including empty) means single seleciton; array (including empty array) means multiple selection. | | render-month | Array | | | specify which date to render, for example [2018, 8] | | start-date | String | | | start date with format `YYYY-MM-dd` | | end-date | String | | | end date with format `YYYY-MM-dd` | | show-last-month | Boolean | true | | if show last month's days | | show-next-month | Boolean | true | | if show next month's days | | highlight-weekend | Boolean | false | | if highlight weekend days | | return-six-rows | Boolean | true | | if always show six rows | | hide-header | Boolean | false | | if hiding header | | hide-week-list | Boolean | false | | if hiding week list | | replace-text-list | Object | | | replace list, for example, {'TODAY':'今'} | | weeks-list | Array | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | | week list, starting from `Sunday` | | render-function | Function | | | render function to add extra contents, params `(line, row, dateData)` | | render-on-value-change | Boolean | true | | if re-render calendar if value changes, should set to false when showing multi months | | disable-past | Boolean | false | | if disable the past days, can work with start-date | | disable-future | Boolean | false | | if disable future days, can work with end-date | Demo page --- ### Keyboard Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Keyboard } from 'cvux' ``` ` the rid_device_info_keyboard ` is a keyboard component, it is mainly used for containing the license used keyboard input, VIN code input Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | type | String | provinces | | null | | show | Boolean | false | | null | Events |name|params|description|version| |-------|-------|-------|-------| | handle-value | (`value`) | undefined | | | handle-delete | (`value`) | undefined | | | on-show | | undefined | | | on-hide | | undefined | | Demo page --- ### Picker Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Picker } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Array | | | picker value, use `v-model` for binding | | data | Array | | | array list | | columns | Number | | | how many columns in chained-mode | | fixed-columns | Number | | | how many columns will show | | id | String | | | the id of item element, that is needed in ssr model | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | emits when value is changed | | Demo page --- ### PopupPicker Edit document   Demo page   demo 原始链接   Demo source   ``` js import { PopupPicker } from 'cvux' ```

other props are the same as `Picker`

Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Array | | | picker value, use `v-model` for binding | | title | String | | | label text | | cancel-text | String | | | popup cancel text | | confirm-text | String | | | popup confirm text | | placeholder | String | | | placeholder | | show-name | Boolean | false | | if show names instead of keys | | inline-desc | String | | | description text below label | | show | Boolean | | | popup show (supports the .sync modifier next) | | id | String | | | the id for picker | | valueTextAlign | String | | | Value the way it is | | columns | Number | | | how many columns in chained-mode | | fixed-columns | Number | | | how many columns will show | | show-second-name | Boolean | | 1.3.7 | Specifies the second column value of the display text that cannot be set at the same time as show-name | Demo page --- ### Radio Edit document Demo page demo 原始链接 Demo source ``` js import { Radio } from 'cvux' ``` ```html ``` `options` can be plain array, or object list with 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' }] ```

`radio` should be used in `Group`.

Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String | | | radio value, use `v-model` for binding | | options | Array | | | option list, can be plain array or array with `key=>value` | | fill-mode | Boolean | false | | if add an option user can fill | | fill-placeholder | String | | | placeholder for fill input | | fill-label | String | | | label for fill input | Demo page --- ### Search Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Search } from 'cvux' ``` ` search ` is a search box components Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | placeholder | String | | v1.3.0 | Search box placeholder | | value | String | | v1.3.0 | Search value | Events |name|params|description|version| |-------|-------|-------|-------| | on-blur | | Triggered when out of focus | | | on-focus | | Triggered when getting focus | | | on-change | | Triggered when the search value changes | | | on-search | | Triggered when you click search icon | | | on-click-clear-icon | | Click on the clear icon event to trigger | | Demo page --- ### SelectorList Edit document   Demo page   demo 原始链接   Demo source   ``` js import { SelectorList } from 'cvux' ``` ` the SelectorList ` is a Components that can be used to select user role permission displays, as well as search boxes，at the same time, support the choice single or multiple. Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Boolean | 必须 | | undefined | | checked | String
Number
Array | 必须 | | undefined | | name | String | - | | undefined | | count | Number | 10 | | null | | title | String | 请先让行政经理把门店人员添加到系统中 | | undefined | | roleList | Array | 必须 | | undefined | | idKey | String | id | | undefined | | nameKey | String | name | | undefined | | roleKey | String | roles | | undefined | Events |name|params|description|version| |-------|-------|-------|-------| | commit | (`checked`, `name`) | undefined | | Demo page --- ### Selector Edit document   Demo page   demo 原始链接   Demo source   ``` js import { Selector } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String
Number
Object | | | form value, use `v-model` for binding | | title | String | | | label text | | direction | String | | | align value | | options | Array | | | option list, `['one', 'two']` or `[{ key: KEY, value: VALUE }]` | | name | String | | | form name | | placeholder | String | | | placeholder | | readonly | Boolean | false | | if the select is readonly | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | emits when value is changed | | Demo page --- ### XAddress Edit document   Demo page   demo 原始链接   Demo source   ``` js ``` ```html

``` ``` js import { XAddress } from 'vux' // you can import built-in data import { XAddress, ChinaAddressV3Data } from 'vux' // if you need older data import { XAddress, ChinaAddressV1Data } from 'vux' ```

you can view source data at [src/datas](https://github.com/airyland/vux/tree/v2/src/datas).

`x-address` should be used in `Group`

Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | raw-value | Boolean | false | | if the initial value is `string value` instead of `id value` | | title | String | | | label text | | value | Array | | | form value, use `v-model` for binding | | list | Array | | | address data | | inline-desc | String | | | description text below label | | placeholder | String | | | placeholder | | hide-district | Boolean | false | | if hide district column | | value-text-align | String | right | | align setting of `value` | | show-second-name | Boolean | | 1.3.7 | Specifies the second column value of the display text that cannot be set at the same time as show-name | Events |name|params|description|version| |-------|-------|-------|-------| | on-hide | true或者false | emits when being closed | | | on-show | | emits when being open | | | on-change | 改变地址的值，是一个Object对象 | The value is triggered when it changes, and the parameter is the changed value | 1.3.7 | Demo page --- ### XButton Edit document Demo page demo 原始链接 Demo source ``` js import { XButton } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | type | String | default | | button style type, one of default, primary, warn | | disabled | Boolean | false | | if disable the button | | text | String | | | button text, has the same function as default slot | | mini | Boolean | false | | if use smaller style | | plain | Boolean | false | | if use plain styles which has no backgroundColor | | action-type | String | | | button's type value, one of `submit`, `button`, `reset` | | show-loading | Boolean | false | | show loading icon | Slots |name|description|version| |-------|-------|-------| | default | button text | | Demo page --- ### XInput Edit document Demo page demo 原始链接 Demo source ``` js import { XInput } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | String | | | input value, use `v-model` for binding | | type | String | text | | input type, one of `text`,`number`,`email`,`password`,`tel` | | is-type | String
Function | | | custom validating function, should return `{valid:true}` or `{valid:false, msg: error msg}` | | required | Boolean | false | | if is required | | title | String | | | label text | | placeholder | String | | | placeholder | | show-clear | Boolean | true | | if show clear icon | | min | Number | | | minlength for input | | max | Number | | | maxlength for input | | disabled | Boolean | false | | if input is disabled | | readonly | Boolean | false | | if input is readonly | | debounce | Number | | | debounce time | | text-align | String | left | | text-align setting for value | Slots |name|description|version| |-------|-------|-------| | label | undefined | | | restricted-label | undefined | | | right | undefined | | Events |name|params|description|version| |-------|-------|-------|-------| | on-blur | `(value, $event)` | undefined | | | on-focus | `(value, $event)` | undefined | | | on-enter | `(value, $event)` | undefined | | | on-change | `(value)` | undefined | | | on-click-clear-icon | | undefined | v2.1.15 | Methods |name|params|description|version| |-------|-------|-------|-------| | focus | | get input focus | | | blur | | remove focus from input | | Demo page --- ### XNumber Edit document Demo page demo 原始链接 Demo source ``` js import { XNumber } from 'cvux' ``` ```html

``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Number | 0 | | form value, use `v-model` for binding | | title | String | | | label text | | min | Number | | | minimum number of value | | max | Number | | | maximum number of value | | step | Number | 1 | | step value | | fillable | Boolean | false | | if use can fill the number | | width | String | 50px | | width of the input element | | button-style | String | square | | button styles, ['square', 'round'] | | align | String | right | | align setting of the selecting area | Demo page --- ### XSwitch Edit document Demo page demo 原始链接 Demo source ``` js import { XSwitch } from 'cvux' ``` ```html

``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | title | String | | | label text | | disabled | Boolean | false | | if disabled | | value | Boolean | false | | component's value, use `v-model` for binding | | inline-desc | String | | | desctiption text below the label | Demo page --- ### XTextarea Edit document Demo page demo 原始链接 Demo source ``` js import { XTextarea } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | show-counter | Boolean | true | | if show the text length counter | | max | Number | 0 | | maxlength limit | | value | String | | | textarea's value, use `v-model` for binding | | name | String | | | textarea's name | | placeholder | String | | | placeholder | | rows | Number | 3 | | textarea's rows attribute | | cols | Number | 30 | | textarea's cols attribute | | height | Number | 0 | | height | | readonly | Boolean | false | | textarea's readonly attribute | Events |name|params|description|version| |-------|-------|-------|-------| | on-change | `(value)` | triggers when value changes | | Demo page