---
nav: en
---
## Components
---
### Actionsheet
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Actionsheet } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | if showing the component; use v-model for binding |
| show-cancel | Boolean | false | | if showing the cancel menu; invalid for android theme |
| cancel-text | String | cancel(取消) | | text of cancel menu |
| theme | String | ios | | theme of menus, can be in ['ios', 'android'] |
| menus | Object
Array | {} | | menu items, for example: `{menu1: 'some text'}`, menu name with `.noop` will not trigger click events.
`Menus` supports array since `v2.1.0`. Keys can be customized. More details below. |
| close-on-clicking-mask | Boolean | true | | if closing actionsheet when clicking on mask |
| close-on-clicking-menu | Boolean | true | | if hide automatically when clicking on menus |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-click-menu | (menuKey, menuItem) | triggers when clicking on the menu | |
| on-click-menu-{menuKey} | (menuKey) | shortcut event for easier listening, `menuKey` is related to `label`. For exapmple, you can listen on `on-click-menu-delete` if you have a menu named `delete` | |
| on-click-menu-cancel | | triggers when clicking on the cancel menu | |
| on-click-mask | | triggers when clicking on mask | |
Demo page
`menus` supports type: Array.
`label`: label name，you can use simple text or `html`
`value`: event name，if not specified, no `on-click-menu` will be emitted
`type`:
- `primary` primary color
- `warn` warn color
- `disabled` gray color, the menu cannot be clicked
- `info ` the menu item shows as a tip, the same function as `key.noop` when setting menus by `Object`.
``` js
[{
label: 'Are you sure?
Once deleted, you will never find it.',
type: 'info'
}, {
label: 'Primary',
type: 'primary',
value: 'primary'
}, {
label: 'Warn',
type: 'warn'
}, {
label: 'Disabled',
type: 'disabled'
}, {
label: 'Default'
}]
```
---
### Badge
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Badge } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| text | String | | | text of the Badge |
Demo page
---
### ButtonTabItem
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { ButtonTabItem } from 'cvux'
```
ButtonTab
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Number | 0 | | current index, start from 0, use `v-model` for binding |
| height | Number | 30 | | height in px |
ButtonTabItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| selected | Boolean | false | | if selected |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-item-click | (index) | emits when item is clicked | |
Demo page
---
### ButtonTab
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { ButtonTab } from 'cvux'
```
ButtonTab
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Number | 0 | | current index, start from 0, use `v-model` for binding |
| height | Number | 30 | | height in px |
ButtonTabItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| selected | Boolean | false | | if selected |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-item-click | (index) | emits when item is clicked | |
Demo page
---
### Calendar
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Calendar } from 'cvux'
```
```html
```
`calendar` can be only used in `Group`
Except `title` and `value`, other `props` are the same as those of `inline-calendar`.
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | String | | | form value, binding by v-model. Empty means single seleciton; [] means multiple selection. When the value is "TODAY", can quick pick current date. `placeholder` is valid only when the value is empty or []. |
| title | String | | | text of label |
| placeholder | String | | | placeholder |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-change | (value) | emits when value changes | |
| on-show | | emits when popup shows | |
| on-hide | | emits when popup hides | |
Demo page
---
### Card
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Card } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| header.title | String | | | title of header, not show without specify content |
| footer.title | String | | | title of footer, not show without specify content |
| footer.link | String | | | link in the bottom, normal url or a v-link argument |
Slots
|name|description|version|
|-------|-------|-------|
| header | header | |
| content | content, the main body part | |
| footer | footer | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-click-footer | | emits when clicking the footer | |
| on-click-header | | emits when clicking the header | |
Demo page
---
### 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
---
### ColorPicker
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { ColorPicker } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | String | | | form value |
| colors | Array | | | color list |
| size | String | large | | button size, enum: large, middle, small |
Demo page
---
### Countdown
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Countdown } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | number | | | total sections |
| start | Boolean | true | | if start counting down |
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
---
### Divider
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Divider } from 'cvux'
```
Slots
|name|description|version|
|-------|-------|-------|
| default | title | |
Demo page
---
### FlexboxItem
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { FlexboxItem } from 'cvux'
```
Flexbox
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| gutter | Number | 8 | | gap size (px) |
| orient | String | horizontal | | can be in ['horizontal', 'vertical'] |
| justify | String | | | `justify-content` in `flex` |
| align | String | | | `align-items` in `flex` |
| wrap | String | | | `flex-wrap` in `flex` |
| direction | String | | | `flex-direction` in `flex` |
Slots
|name|description|version|
|-------|-------|-------|
| default | content slot for `flexbox-item` | |
FlexboxItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| span | Number | | | occupied width. If not set, all flexbox-item will get the same width. |
| order | String | | | `order` in `flex` |
Slots
|name|description|version|
|-------|-------|-------|
| default | content slot | |
Demo page
---
### Flexbox
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Flexbox } from 'cvux'
```
Flexbox
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| gutter | Number | 8 | | gap size (px) |
| orient | String | horizontal | | can be in ['horizontal', 'vertical'] |
| justify | String | | | `justify-content` in `flex` |
| align | String | | | `align-items` in `flex` |
| wrap | String | | | `flex-wrap` in `flex` |
| direction | String | | | `flex-direction` in `flex` |
Slots
|name|description|version|
|-------|-------|-------|
| default | content slot for `flexbox-item` | |
FlexboxItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| span | Number | | | occupied width. If not set, all flexbox-item will get the same width. |
| order | String | | | `order` in `flex` |
Slots
|name|description|version|
|-------|-------|-------|
| default | content slot | |
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
---
### Icon
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Icon } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| type | String | | | icon name, optional values are shown in demo |
| is-msg | Boolean | false | | if used as msg icon. Icon's font-size will be bigger(93px) than default |
Demo page
``` html
```
---
### 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
---
### Loading
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Loading } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| show | Boolean | false | | visibility of the component. Use `v-model` for binding before v2.5.7, otherwise use `:show` |
| text | String | | | loading text |
| position | String | fixed | | position, default is `fixed`, you can use `absolute` |
| transition | String | vux-mask | | transition name |
Slots
|name|description|version|
|-------|-------|-------|
| default | content area | |
Demo page
---
### Masker
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Masker } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| color | String | 0, 0, 0 | | the mask's color in rgb format, for example, '0, 0, 0' |
| opacity | Number | 0.5 | | the opacity of the mask |
| fullscreen | Boolean | false | | if masker is fullscreen |
Slots
|name|description|version|
|-------|-------|-------|
| default | content below the mask | |
| content | content above the mask | |
Demo page
---
### Panel
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Panel } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| header | String | | | header title |
| footer | Object | | | footer config, `{url: url, title: title}` |
| list | Array | | | content list `[{title, desc, src, fallbackSrc, meta:{source,date,other}}]` |
| type | String | 1 | | one of '1', '2', '3', '4', '5' |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-click-header | | emits when clicking header | |
| on-click-item | `(item)` | emits when clicking item | |
| on-click-footer | | emits when clicking footer | |
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
---
### Popup
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Popup } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | | | visibility of popup, use `v-model` for binding |
| height | String | auto | | popup height, works when position is top or bottom |
| hide-on-blur | Boolean | true | | if closing popup when mask being clicked |
Slots
|name|description|version|
|-------|-------|-------|
| default | content body | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-hide | | emits when then popup is closed | |
| on-show | | emits when the popup shows | |
| on-first-show | | emits at the first time the popup shows | |
Demo page
---
### Previewer
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Previewer } from 'cvux'
```
example for list:
``` js
[{
src: 'https://placekitten.com/800/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
msrc: 'https://placekitten.com/120/90', // 缩略图
w: 1200,
h: 900
}]
```
before v2.4.0, `w` and `h` should be specified.
Prevewing an image by index:
``` js
this.$refs.previewer.show(index)
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| list | Array | | | images list |
| options | Object | | | options for `photoswipe` |
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
---
### ScrollerPage
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { ScrollerPage } from 'cvux'
```
Slots
|name|description|version|
|-------|-------|-------|
| default | title | |
| header | header | |
| footer | footer | |
Methods
|name|params|description|version|
|-------|-------|-------|-------|
| computeHeight | | Header and footer based height, dynamic calculation of scroller area height | |
Demo page
如需动态控制 header 或 footer 显示状态，需要在 dom 更新完毕之后，调用组件的 computeHeight 方法重新计算 scroller 区域高度。
``` js
this.$nextTick(() => {
this.$refs.scrollerPage.computeHeight()
})
```
---
### Scroller
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Scroller } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Object | | | current pulldown and pullup status, use `v-model` for binding |
| height | String | viewport height | | scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px` |
| lock-x | Boolean | false | | lock the horizontal direction |
| lock-y | Boolean | false | | lock the vertical direction |
| scrollbar-x | Boolean | false | | if show horizontal scrollbar |
| scrollbarY | Boolean | false | | if show vertical scrollerbar |
| bounce | Boolean | true | | if use bounce effect |
| use-pulldown | Boolean | false | | if use pulldown plugin |
| use-pullup | Boolean | false | | if use pullup plugin |
| pulldown-config | Object | see below | | config for pulldown plugin |
| pullup-config | Object | see below | | config for pullup plugin |
| scroll-bottom-offset | Number | 0 | v2.2.1-rc.6 | where to emit event:on-scroll-bottom before reaching bottom |
Slots
|name|description|version|
|-------|-------|-------|
| default | scroller content, should has only one `div` root | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-scroll | `(position)` | emits when user scrolls | |
| on-scroll-bottom | | emits when user scrolls to bottom. The event may emit multiple times, so you should use a variable for keeping status if you need fetching data | v2.2.1-rc.6 |
| on-pulldown-loading | | emits when scroller is on pulldown-loading status | |
| on-pullup-loading | | emits when scroller is on pullup-loading status | |
| on-scroll-start | | emits when scroller starts scroll | |
| on-scroll-end | | emits when scroller is scroll to end | |
Methods
|name|params|description|version|
|-------|-------|-------|-------|
| reset | `(position, duration, easing)` | reset scroller to reset height whenever your data is changed. easing can be one of ease-in, ease-in-out, ease, bezier(n, n, n, n) | |
| donePullup | | set pullup done after new data is fetched | |
| disablePullup | | disable pullup plugin when there is no more data | |
| enablePullup | | enable pullup plugin | |
| donePulldown | | set pulldown done after new data is fetched | |
Demo page
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-'
}
```
QA 如何更新数据
如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可
``` js
this.$nextTick(() => {
this.$refs.scroller.reset()
})
```
如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况
``` js
this.$nextTick(() => {
this.$refs.scroller.reset({
top: 0
})
})
```
QA 如何设置pullup完成
方法1，直接调用on-pullup-loading绑定事件的回调，传参数time 表示延时time执行，不传参数表示立即执行
``` js
...
...
methods: {
loadMore(done) {
...
done(100)
}
}
```
方法2，直接调用ref的`donePullup`方法
``` js
this.$refs.demo2.donePullup()
```
方法3，绑定value, 重置状态
自定义pullup模板同样是用v-model来绑定以获取状态变化
``` html
```
``` js
data () {
return {
status: {
pullupStatus: 'default'
}
}
}
```
```
// 重置状态为default
this.status.pullupStatus = 'default
```
QA 如何设置pulldown完成
参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。
QA 如何禁用或者启用pullup
在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`
反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`
启用keep-alive后滚动有问题
需要在调用Scroller的页面上在 hook: `activated`上执行`reset`
``` js
activated () {
this.$refs.scroller.reset()
}
```
---
### 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
---
### Spinner
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Spinner } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| type | String | ios | | icon type |
Demo page
---
### Steps
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Steps } from 'cvux'
```
```html
经手：{{step.operator_name}}（{{step.role_names}}）
```
`steps` must be an array, including an attribute named title and Customizing an attribute named title to display four states:
pending_review, approved, rejected, not_started
`fr-key`: must be a string, Customizing the top right corner
``` 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'
}]
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| steps | Array | | | review list, can be an array with `title & status` |
| title | String | 审核流程 | | the title of steps |
| frKey | String | | | the top right corner |
Demo page
---
### Sticky
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Sticky } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| scroll-box | String | window | | scroll tagget |
| check-sticky-support | Boolean | true | | if check if sticky is supported on current browser |
| offset | Number | 0 | | top distance |
Slots
|name|description|version|
|-------|-------|-------|
| default | content | |
Demo page
---
### Swiper
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Swiper } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| list | Array | | | image list |
| direction | String | horizontal | | swiping direction |
| show-dots | Boolean | true | | if show indicators |
| show-desc-mask | Boolean | true | | if show description mask |
| dots-position | String | right | | indicator position |
| dots-class | String | | | custom indicator's classname |
| auto | Boolean | false | | if auto playing |
| loop | Boolean | false | | if use loop mode |
| interval | Number | 3000 | | interval value |
| threshold | Number | 50 | | threshold value |
| duration | Number | 300 | | transition duration |
| height | String | 180px | | height value |
| aspect-ratio | Number | | | if specified, height will be caculated automatically |
| min-moving-distance | Number | 0 | | min distance before moving |
| v-model | Number | 0 | | index value, use `v-model` for binding |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-index-change | `(currentIndex)` | fires when index is changed | |
Demo page
---
### TabItem
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { TabItem } from 'cvux'
```
Tab
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| line-width | Number | 3 | | undefined |
| active-color | String | | | undefined |
| defaultColor | String | | | undefined |
| disabled-color | String | | | undefined |
| bar-active-color | String | | | undefined |
| animate | Boolean | true | | undefined |
TabItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| disabled | Boolean | false | | undefined |
| active-class | String | | | undefined |
Demo page
---
### Tab
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Tab } from 'cvux'
```
Tab
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| line-width | Number | 3 | | undefined |
| active-color | String | | | undefined |
| defaultColor | String | | | undefined |
| disabled-color | String | | | undefined |
| bar-active-color | String | | | undefined |
| animate | Boolean | true | | undefined |
TabItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| disabled | Boolean | false | | undefined |
| active-class | String | | | undefined |
Demo page
---
### TabbarItem
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { TabbarItem } from 'cvux'
```
Tabbar
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| icon-class | String | | | icon's classname |
Slots
|name|description|version|
|-------|-------|-------|
| default | slot for tabbar items | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-index-change | | emits when value is changed | |
TabbarItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| selected | Boolean | false | | if selected, you can also use `v-model="index"` on tabbar to set item selected |
| badge | String | | | badge text, if not specified, the badge will not show |
| show-dot | Boolean | false | | if show the red dot |
| link | String | | | the url for current tabbar item, can be a url or a `vue-router` link value |
| icon-class | String | | | the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown |
Slots
|name|description|version|
|-------|-------|-------|
| icon | icon area | |
| label | label text | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-item-click | | emits when tabbar item is clicked | |
Demo page
---
### Tabbar
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Tabbar } from 'cvux'
```
Tabbar
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| icon-class | String | | | icon's classname |
Slots
|name|description|version|
|-------|-------|-------|
| default | slot for tabbar items | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-index-change | | emits when value is changed | |
TabbarItem
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| selected | Boolean | false | | if selected, you can also use `v-model="index"` on tabbar to set item selected |
| badge | String | | | badge text, if not specified, the badge will not show |
| show-dot | Boolean | false | | if show the red dot |
| link | String | | | the url for current tabbar item, can be a url or a `vue-router` link value |
| icon-class | String | | | the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown |
Slots
|name|description|version|
|-------|-------|-------|
| icon | icon area | |
| label | label text | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-item-click | | emits when tabbar item is clicked | |
Demo page
---
### Toast
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Toast } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | if showing toast, use v-model for binding |
| time | Number | 2000 | | show time |
| type | String | success | | toast type, success, warn, cancel, text |
| width | String | 7.6em | | toast's width |
| is-show-mask | Boolean | false | | if showing mask, users cannot operate other elements on the page |
| text | String | | | content of the toast, text or html, the same function as default slot |
Slots
|name|description|version|
|-------|-------|-------|
| default | default slot, the content of the toast | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when toast shows | |
| on-hide | | emits when toast hides | |
Demo page
---
### UploadPic
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { UploadPic } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| group | String | upload | | undefined |
| showName | Boolean | true | | undefined |
| imgKey | String | src | | undefined |
| count | String
Number | 0 | | undefined |
| optional | Boolean | false | | undefined |
| dragable | Boolean | true | | undefined |
| bgUrl | String | ../../assets/uploadpic/default.png | | undefined |
| images | Array | | | undefined |
Slots
|name|description|version|
|-------|-------|-------|
| default | undefined | |
| subname | undefined | |
Methods
|name|params|description|version|
|-------|-------|-------|-------|
| upload | `(index)` | undefined | |
Demo page
---
### ViewBox
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { ViewBox } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| body-padding-top | String | | | undefined |
| body-padding-bottom | String | | | undefined |
Slots
|name|description|version|
|-------|-------|-------|
| header | undefined | |
| default | undefined | |
| bottom | undefined | |
Methods
|name|params|description|version|
|-------|-------|-------|-------|
| scrollTo | `(top)` | undefined | |
| getScrollTop | | undefined | |
| getScrollBody | | undefined | |
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
---
### XAlert
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XAlert } from 'cvux'
```
Show some information that user should pay attention to and should be closed only after user has clicked the close button
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | visibility of the component, use v-model for binding |
| title | String | | | title |
| button-text | String | ok(确定) | | button text |
| mask-transition | String | vux-fade | | mask transition |
| dialog-transition | String | vux-dialog | | dialog transition |
| content | string | null | 1.3.4 | undefined |
| autoCloseTime | Number | 0 | 1.3.4 | undefined |
Slots
|name|description|version|
|-------|-------|-------|
| default | dialog content | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when dialog shows | |
| on-hide | | emits when dialog is closed | |
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
---
### XDialog
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XDialog } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| show | Boolean | false | | visibility of the dialog, supports the .sync modifier |
| mask-transition | String | vux-mask | | transition of mask |
| dialog-transition | String | vux-dialog | | transition of dialog body |
| hide-on-blur | Boolean | false | | if closing dialog when clicking on mask |
| scroll | Boolean | true | | [deprecated]if body content can scroll when scrolling on dialog |
Slots
|name|description|version|
|-------|-------|-------|
| default | main content of the dialog | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when opening dialog | |
| on-hide | | emits when closing dialog | |
Demo page
---
### XHeader
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XHeader } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| left-options.showBack | Boolean | true | | if show back text |
| left-options.backText | String | Back | | the back text |
| left-options.preventGoBack | Boolean | false | | stop go back when clicking |
| title | String | | | title |
| transition | String | | | title transition |
| right-options.showMore | Boolean | false | | if show more icon |
Slots
|name|description|version|
|-------|-------|-------|
| default | title | |
| left | left slot after backText | |
| right | right slot | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-click-more | | triggers when more icon is clicked | |
| on-click-back | | triggers when left part is clicked and the prop 'left-options.preventGoBack' is true | |
| on-click-title | | triggers when title is clicked | |
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
---
### XProgress
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XProgress } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| percent | Number | 0 | | percent of the progress, 0-100 |
| show-cancel | Boolean | true | | if show the cancel button |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-cancel | | triggers when the cancel button is clicked | |
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