Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Actionsheet } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | if showing the component; use v-model for binding | \n
show-cancel | \nBoolean | \nfalse | \n\n | if showing the cancel menu; invalid for android theme | \n
cancel-text | \nString | \ncancel(取消) | \n\n | text of cancel menu | \n
theme | \nString | \nios | \n\n | theme of menus, can be in [‘ios’, ‘android’] | \n
menus | \nObject Array | \n{} | \n\n | 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. | \n
close-on-clicking-mask | \nBoolean | \ntrue | \nv2.0.0 | \nif closing actionsheet when clicking on mask | \n
close-on-clicking-menu | \nBoolean | \ntrue | \nv2.3.8 | \nif hide automatically when clicking on menus | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-menu | \n(menuKey, menuItem) | \ntriggers when clicking on the menu | \n\n |
on-click-menu-{menuKey} | \n(menuKey) | \nshortcut 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 | \n\n |
on-click-menu-cancel | \n\n | triggers when clicking on the cancel menu | \n\n |
on-click-mask | \n\n | triggers when clicking on mask | \nv2.3.4 | \n
From v2.1.0
, 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 colorwarn
warn colordisabled
gray color, the menu cannot be clickedinfo
the menu item shows as a tip, the same function as key.noop
when setting menus by Object
.[{\n label: 'Are you sure?<br/><span style=\"color:#666;font-size:12px;\">Once deleted, you will never find it.</span>',\n type: 'info'\n}, {\n label: 'Primary',\n type: 'primary',\n value: 'primary'\n}, {\n label: 'Warn',\n type: 'warn'\n}, {\n label: 'Disabled',\n type: 'disabled'\n}, {\n label: 'Default'\n}]\n
\nEdit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Alert } from 'vux'\n
\nThis component can be imported as plugin:
\n\nWhen importing it as plugin, the usage is different from it in `template`. Please use `little camel-case` such as `buttonText` instead of `button-text`.\n
\nimport { AlertPlugin } from 'vux'\nVue.use(AlertPlugin)\n\n// or the way of umd\n// import built js file\nVue.use(vuxAlertPlugin)\n
\n// show\nthis.$vux.alert.show({\n title: 'Vux is Cool',\n content: 'Do you agree?',\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding')\n }\n})\n// hide\nthis.$vux.alert.hide()\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | visibility of the component, use v-model for binding | \n
title | \nString | \n\n | \n | title | \n
content | \nString | \n\n | v2.2.0 | \nalert content, and will be replaced if using slot:default | \n
button-text | \nString | \nok(确定) | \n\n | button text | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | if closing dialog when clicking on mask | \n
mask-transition | \nString | \nvux-fade | \n\n | mask transition | \n
dialog-transition | \nString | \nvux-dialog | \n\n | dialog transition | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \nzIndex of mask | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ndialog content | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | emits when dialog shows | \n\n |
on-hide | \n\n | emits when dialog is closed | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Badge } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
text | \nString | \n\n | \n | text of the Badge | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Blur } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
blur-amount | \nNumber | \n10 | \n\n | blur amount of the effect | \n
url | \nString | \n\n | \n | url of the image | \n
height | \nNumber | \n200 | \n\n | height of the container | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent of the container, above the blur image | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { ButtonTab, ButtonTabItem } from 'vux'\n\n
\nButtonTab
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | current index, start from 0, use v-model for binding | \n
height | \nNumber | \n30 | \n\n | height in px | \n
ButtonTabItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
selected | \nBoolean | \nfalse | \n\n | if selected | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-item-click | \n(index) | \nemits when item is clicked | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Calendar } from 'vux'\n
\n <group>\n <calendar title=\"title\" v-model=\"value\"></calendar>\n </group>\n
\n`calendar` can be only used in `Group`\n
\nExcept `title` and `value`, other `props` are the same as those of `inline-calendar`.\n
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 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 []. | \n
title | \nString | \n\n | \n | text of label | \n
placeholder | \nString | \n\n | \n | placeholder | \n
show-popup-header | \nBoolean | \n\n | v2.6.0 | \nwhether show popup header. Show under multiple selection mode; hide under single selection mode. | \n
popup-header-title | \nString | \n\n | v2.6.0 | \npopup header title | \n
display-format | \nFunction | \n\n | v2.6.4 | \nformat value before displaying in cell | \n
readonly | \nString | \n\n | v2.7.2 | \nwhether disable selecting | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value changes | \n\n |
on-show | \n\n | emits when popup shows | \n\n |
on-hide | \n\n | emits when popup hides | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Card } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header.title | \nString | \n\n | \n | title of header, not show without specify content | \n
footer.title | \nString | \n\n | \n | title of footer, not show without specify content | \n
footer.link | \nString | \n\n | \n | link in the bottom, normal url or a v-link argument | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
header | \nheader | \n\n |
content | \ncontent, the main body part | \n\n |
footer | \nfooter | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-footer | \n\n | emits when clicking the footer | \n\n |
on-click-header | \n\n | emits when clicking the header | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { CellBox } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
is-link | \nBoolean | \nfalse | \n\n | if this is a link; if true, there will be an arrow on the right | \n
link | \nString Object | \n\n | \n | redirect link. Can be http(s) protocol; can also be vue-router format | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \nif set border intent on the left side | \n
align-items | \nString | \ncenter | \nv2.6.5 | \nflexbox align-items setting | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent body | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { CellFormPreview } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
list | \nArray | \n\n | v2.2.0 | \nlabel and value list | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \nif set border intent on the left side | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Cell } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | label text on the left | \n
value | \nString | \n\n | \n | right text | \n
inline-desc | \nString | \n\n | \n | the text below title | \n
link | \nString Object | \n\n | \n | redirect link. Can be http(s) protocol; can also be vue-router format | \n
is-link | \nBoolean | \nfalse | \n\n | if this is a link; if true, there will be an arrow on the right | \n
primary | \nString | \ntitle | \n\n | main content area, can be in [‘title’, ‘content’] | \n
is-loading | \nBoolean | \nfalse | \nv2.2.0 | \nif show loading icon, good for asynchronous loading | \n
value-align | \nString | \nleft | \nv2.2.0 | \nvalue’s text-align,one of left, right. prop:primary will be set to content if value-align value is right | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \nif set border intent on the left side | \n
arrow-direction | \nString | \n\n | v2.2.1-rc.1 | \narrow direction, one of up, down | \n
disabled | \nBoolean | \n\n | v2.2.2 | \nset disabled style for label and arrow (if is-link is true) | \n
align-items | \nString | \ncenter | \nv2.6.4 | \nalign-items value | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nright area, you can use default slot instead of prop:value so you can use complicated layout | \n\n |
value | \n[deprecated] the same as default slot | \n\n |
icon | \nicon area before title | \n\n |
after-title | \nafter title | \n\n |
child | \nthe child element of the cell, you can add an element with absolute position | \n\n |
inline-desc | \ninline-desc slot, the same function as prop:inline-desc but can use html | \nv2.2.1-rc.6 | \n
title | \ntitle slot | \nv2.3.3 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { CheckIcon } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \nv2.3.8 | \nif selected, use :value.sync for two-way data binding | \n
type | \nString | \nunknown | \n\n | style of check icon, can be [‘plain’] | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Checker } from 'vux'\n
\nChecker
is a more flexible component than Radio
and Checklist
.
Checker
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
default-item-class | \nString | \n\n | \n | default checker-item classname | \n
selected-item-class | \nString | \n\n | \n | selected check-item classname | \n
disabled-item-class | \nString | \n\n | \n | disabled check-item classname | \n
type | \nString | \nradio | \n\n | checker type, should be raido or checkbox | \n
value | \nString Array | \n\n | \n | selected value, use v-model for binding | \n
max | \nNumber | \n\n | \n | max selected number when type = checkbox | \n
radio-required | \nBoolean | \nfalse | \nv2.6.3 | \nwhether value is required in radio mode. if true, current selected item will always be selected even after clicking | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value is changed | \n\n |
CheckerItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | value of current checker-item | \n
disabled | \nBoolean | \nfalse | \n\n | if current item is disabled | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-item-click | \n(itemValue, itemDisabled) | \nemits when current checker-item is clicked | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Checklist } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | form value | \n
title | \nString | \n\n | \n | title | \n
required | \nBoolean | \nfalse | \n\n | if required | \n
options | \nArray | \n\n | \n | options list | \n
max | \nNumber | \n\n | \n | max selected number | \n
min | \nNumber | \n\n | \n | min selected number | \n
random-order | \nBoolean | \nfalse | \n\n | if place options in a random order | \n
check-disabled | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \nif disabled item when selectedItems.length === total.length, by using this prop:max no longer works | \n
label-position | \nString | \nright | \nv2.2.1-rc.4 | \nlabel position, can be set to left or right | \n
disabled | \nString | \n\n | v2.3.8 | \nif disable user from selecting | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value, label) | \nemits when value changes, param:label is supported after v2.5.7 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getFullValue | \n\n | get current value with label | \nv2.6.4 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Clocker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
time | \nString | \n\n | \n | the end time | \n
format | \nString | \n%D 天 %H 小时 %M 分 %S 秒 | \n\n | the result format | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nif specified, will be the format for the result | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-tick | \n\n | triggers on time ticking | \n\n |
on-finish | \n\n | triggers on time end | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
This Component is Deprecated. use cell and slot instead
\nimport { ColorPicker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | form value | \n
colors | \nArray | \n\n | \n | color list | \n
size | \nString | \nlarge | \n\n | button size, enum: large, middle, small | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Confirm } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | visibility of the component | \n
show-input | \nBoolean | \nfalse | \nv2.5.0 | \nwhether show input or not. If true, slot will not work | \n
placeholder | \nString | \n\n | v2.5.0 | \nplaceholder of prompt, valid when show-input is true | \n
theme | \nString | \nios | \n\n | dialog’s style, can be ios or android | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | if closing dialog when clicking on mask | \n
title | \nString | \n\n | \n | dialog title | \n
content | \nString | \n\n | \n | dialog content, can use html. Invalid when using slot | \n
confirm-text | \nString | \n确认(confirm) | \n\n | text of confirm button | \n
cancel-text | \nString | \n取消(cancel) | \n\n | text of cancel button | \n
mask-transition | \nString | \nvux-fade | \n\n | mask’s transition | \n
dialog-transition | \nString | \nvux-dialog | \n\n | dialog’s transition | \n
close-on-confirm | \nBoolean | \ntrue | \nv2.5.0 | \nwhether close automatically when confirm button is clicked | \n
input-attrs | \nObject | \n\n | v2.5.7 | \ninput attributes | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \nzIndex of mask | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nbody content of the dialog | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-cancel | \n\n | triggers when the cancel button is clicked | \n\n |
on-confirm | \n(value) | \ntriggers when the confirm button is clicked | \n\n |
on-show | \n\n | triggers when the dialog shows | \n\n |
on-hide | \n\n | triggers when the dialog hides | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
v2.6.4 | \n\n | [feature] support prop:mask-z-index | \n\n |
setInputValue | \n(value) | \nset input value when show-input is true | \nv2.5.5 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
This Component is Deprecated.
\nimport { Countdown } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nnumber | \n\n | \n | total sections | \n
start | \nBoolean | \ntrue | \n\n | if start counting down | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Countup } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
start-val | \nNumber | \n0 | \n\n | min number | \n
end-val | \nNumber | \n\n | \n | max number | \n
decimals | \nNumber | \n0 | \n\n | decimal length | \n
duration | \nNumber | \n2 | \n\n | duration value (second) | \n
options | \nObject | \n\n | \n | options for countup.js | \n
start | \nBoolean | \ntrue | \n\n | if start counting automatically | \n
tag | \nString | \nspan | \nv2.5.5 | \nrender tag | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { DatetimeRange } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | label text | \n
value | \nArray | \n\n | \n | form’s value, use v-model for binding. For example, [‘2017-01-15’, ‘03’, ‘05’] | \n
inline-desc | \nString | \n\n | \n | description of the cell | \n
placeholder | \nString | \n\n | \n | placeholder, works when value is empty | \n
start-date | \nString | \n\n | \n | start date (YYYY-MM-DD) | \n
end-date | \nString | \n\n | \n | end date (YYYY-MM-DD) | \n
format | \nString | \nYYYY-MM-DD | \n\n | display format for date column | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n$emits when value changes, (newVal) | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { DatetimeView } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | form’s value, use v-model for binding | \n
format | \nString | \nYYYY-MM-DD | \n\n | display format for date column | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
render | \n\n | re-render component | \nv2.5.0 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Datetime } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
format | \nString | \nYYYY-MM-DD | \n\n | date format. Special characters are not supported, for example, YYYY-MM-DD HH:mm:ss | \n
title | \nString | \n\n | \n | cell title | \n
value | \nString | \n\n | \n | form’s value, use v-model for binding | \n
inline-desc | \nString | \n\n | \n | description of the cell | \n
placeholder | \nString | \n\n | \n | placeholder, works when value is empty | \n
min-year | \nNumber | \n\n | \n | min-year of the form | \n
max-year | \nNumber | \n\n | \n | max-year of the form | \n
min-hour | \nNumber | \n0 | \n\n | min hour | \n
max-hour | \nNumber | \n23 | \n\n | max hour | \n
confirm-text | \nString | \nok(确认) | \n\n | confirm button’s text | \n
cancel-text | \nString | \ncancel(取消) | \n\n | cancel button’s text | \n
clear-text | \nString | \n\n | \n | custom button’s text which shows in the middle of the header | \n
year-row | \nString | \n{value} | \n\n | render template for the year column | \n
month-row | \nString | \n{value} | \n\n | render template for the month column | \n
day-row | \nString | \n{value} | \n\n | render template for the day column | \n
hour-row | \nString | \n{value} | \n\n | render template for the hour column | \n
minute-row | \nString | \n{value} | \n\n | render template for the minute column | \n
start-date | \nString | \n\n | \n | start date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours | \n
end-date | \nString | \n\n | \n | end date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours | \n
required | \nBoolean | \nfalse | \n\n | if required | \n
display-format | \nFunction | \n\n | v2.1.1-rc.11 | \nused to format display value | \n
readonly | \nString | \n\n | v2.3.6 | \nreadonly mode, show like a cell | \n
show | \nBoolean | \n\n | v2.3.7 | \ncontrol visibility of datetime, require vue^2.3 | \n
minute-list | \nArray | \n\n | v2.3.7 | \nspecify minute list, for instance [‘00’, ‘15’, ‘30’, ‘45’] | \n
hour-list | \nArray | \n\n | v2.3.7 | \nspecify hour list, for instance [‘09’, ‘10’, ‘11’, ‘12’] | \n
default-selected-value | \nString | \n\n | v2.4.1 | \nset default selected value, works only when value is empty | \n
compute-hours-function | \nFunction | \n\n | v2.5.5 | \ndynamically set hours list, params (value, isToday, generateRange) | \n
compute-days-function | \nFunction | \n\n | v2.6.1 | \ndynamically set days list, params ({year, month, min, max}, generateRange) | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ntrigger element content | \n\n |
title | \ntitle slot | \nv2.3.6 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n$emits when value changes, (newVal) | \n\n |
on-clear | \n\n | $emits when click the button in the middle of the header | \n\n |
on-show | \n\n | fires when datetime shows | \n\n |
on-hide | \n(type) , type is one of [cancel, confirm] | \nfires when datetime hides | \nv2.7.4 | \n
on-cancel | \n\n | fires when cancel button is clicked or mask is clicked | \nv2.7.4 | \n
on-confirm | \n\n | fires when confirm button is clicked | \nv2.7.4 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Divider } from 'vux'\n
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ntitle | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Drawer } from 'vux'\n
\nthis component is forked from: https://github.com/bajian/vue-drawer
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \nv2.4.0 | \nvisibility of the component, use :show.sync to control the visibility(vue@^2.3.3) | \n
drawer-style | \nString | \n\n | v2.4.0 | \nmenu container styles | \n
show-mode | \nString | \noverlay | \nv2.4.0 | \nanimation type, can be push or overlay | \n
placement | \nString | \nleft | \nv2.4.0 | \nplacement, left or right | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \npage content container | \nv2.4.0 | \n
drawer | \ndrawer menu container | \nv2.4.0 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Flexbox } from 'vux'\n
\nFlexbox
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
gutter | \nNumber | \n8 | \n\n | gap size (px) | \n
orient | \nString | \nhorizontal | \n\n | can be in [‘horizontal’, ‘vertical’] | \n
justify | \nString | \n\n | \n | justify-content in flex | \n
align | \nString | \n\n | \n | align-items in flex | \n
wrap | \nString | \n\n | \n | flex-wrap in flex | \n
direction | \nString | \n\n | \n | flex-direction in flex | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent slot for flexbox-item | \n\n |
FlexboxItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
span | \nNumber | \n\n | \n | occupied width. If not set, all flexbox-item will get the same width. | \n
order | \nString | \n\n | \n | order in flex | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent slot | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Flow } from 'vux'\n
\nFlow
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
orientation | \nString | \nhorizontal | \n\n | orientation of flow, can be in [‘horizontal’, ‘vertical’] | \n
FlowState
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | title for state point | \n
state | \nString Number | \n\n | \n | content showed inside state point. | \n
is-done | \nBoolean | \nfalse | \n\n | if done | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \ntitle for state point,default content is prop:title | \nv2.7.0 | \n
FlowLine
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
tip | \nString | \n\n | \n | tip for flow line, invalid when is-done is true | \n
tip-direction | \nString | \ntop for horizontal flow, left for vertical flow | \n\n | orientation of tip, can be in [‘top’, ‘right’, ‘bottom’, ‘left’]. If horizontal flow, the default is top; if vertical flow, the default is left | \n
is-done | \nBoolean | \nfalse | \n\n | if done | \n
line-span | \nNumber String | \n\n | \n | length of flow line. if not set, all flow-line will get the same length | \n
process-span | \nNumber String | \n50 | \n\n | percentage rate of progress which will be showed in flow line | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { FormPreview } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header-label | \nString | \n\n | \n | header label | \n
header-value | \nString | \n\n | \n | header value | \n
body-items | \nArray | \n[] | \n\n | a list of label and value pair | \n
footer-buttons | \nArray | \n[] | \n\n | button list. Default is a gray style, and the primary text is highlighted. [{style: ‘primary’, text: ‘text’, onButtonClick: fn(prop:name), link: ‘/path’}] | \n
\n | \n | \n | \n | \n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Grid, GridItem } from 'vux'\n
\nGrid
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
rows | \nNumber | \n3 | \nv2.2.0 | \n(deprecated after v2.6.0) the number of rows. Less than 5 will be better | \n
cols | \nNumber | \n3 | \nv2.6.1 | \nthe number of columns. if there is more than one row in grid, need to set cols value, otherwise all grid items will show in one row with the same width | \n
show-lr-borders | \nBoolean | \ntrue | \nv2.8.1 | \nwhether show left and right borders | \n
show-vertical-dividers | \nBoolean | \ntrue | \nv2.8.1 | \nwhether show vertical dividers | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ndefault slot for grid-item list | \n\n |
GridItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
icon | \nString | \n\n | \n | icon url. if using local resources, it is better to use slot=icon | \n
label | \nString | \n\n | \n | label text | \n
link | \nString | \n\n | \n | vue-router’s path | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
icon | \nicon slot, use <img> | \n\n |
label | \nslot for label, the same func as prop:label | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Group } from 'vux'\n
\nGroup
is a special component for wrapping form elements
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | group title | \n
title-color | \nString | \n\n | \n | group title’s color | \n
label-width | \nString | \n\n | \n | common label width for child components | \n
label-align | \nString | \n\n | \n | common label text-align for child components | \n
label-margin-right | \nString | \n\n | \n | common margin right value for child components | \n
gutter | \nString | \n\n | \n | set the marginTop value when there is no title | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent body for child components | \n\n |
title | \ntitle slot | \nv2.5.1 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Icon } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
type | \nString | \n\n | \n | icon name, optional values are shown in demo | \n
is-msg | \nBoolean | \nfalse | \n\n | if used as msg icon. Icon’s font-size will be bigger(93px) than default | \n
<icon type=\"success\"></icon>\n<icon type=\"info\"></icon>\n<icon type=\"info-circle\"></icon>\n<icon type=\"warn\"></icon>\n<icon type=\"waiting\"></icon>\n<icon type=\"waiting-circle\"></icon>\n<icon type=\"safe-success\"></icon>\n<icon type=\"safe-warn\"></icon>\n<icon type=\"success-circle\"></icon>\n<icon type=\"success-no-circle\"></icon>\n<icon type=\"circle\"></icon>\n<icon type=\"download\"></icon>\n<icon type=\"cancel\"></icon>\n<icon type=\"search\"></icon>\n<icon type=\"clear\"></icon>\n<icon type=\"success\" is-msg></icon>\n<icon type=\"info\" is-msg></icon>\n<icon type=\"safe-success\" is-msg></icon>\n<icon type=\"safe-warn\" is-msg></icon>\n
\nEdit document
\n Demo page
\n demo 原始链接
\n Demo source
import { InlineCalendar } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString Array | \n\n | \n | calendar value, use v-modle for binding. String (including empty) means single seleciton; array (including empty array) means multiple selection. | \n
render-month | \nArray | \n\n | \n | specify which date to render, for example [2018, 8] | \n
start-date | \nString | \n\n | \n | start date with format YYYY-MM-dd | \n
end-date | \nString | \n\n | \n | end date with format YYYY-MM-dd | \n
show-last-month | \nBoolean | \ntrue | \n\n | if show last month’s days | \n
show-next-month | \nBoolean | \ntrue | \n\n | if show next month’s days | \n
highlight-weekend | \nBoolean | \nfalse | \n\n | if highlight weekend days | \n
return-six-rows | \nBoolean | \ntrue | \n\n | if always show six rows | \n
hide-header | \nBoolean | \nfalse | \n\n | if hiding header | \n
hide-week-list | \nBoolean | \nfalse | \n\n | if hiding week list | \n
replace-text-list | \nObject | \n\n | \n | replace list, for example, {‘TODAY’:‘今’} | \n
weeks-list | \nArray | \n[‘Su’, ‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’] | \n\n | week list, starting from Sunday | \n
render-function | \nFunction | \n\n | \n | render function to add extra contents, params (line, row, dateData) | \n
render-on-value-change | \nBoolean | \ntrue | \n\n | if re-render calendar if value changes, should set to false when showing multi months | \n
disable-past | \nBoolean | \nfalse | \n\n | if disable the past days, can work with start-date | \n
disable-future | \nBoolean | \nfalse | \n\n | if disable future days, can work with end-date | \n
marks | \nArray | \n\n | v2.6.0 | \n(beta) style marks for specified date list | \n
disable-weekend | \nBoolean | \nfalse | \nv2.7.0 | \nwhether disable weekends | \n
disable-date-function | \nFunction | \n\n | v2.7.0 | \ncheck if a date should be disabled | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
each-day | \nyou can custom how to display each day | \nv2.3.5 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n\n | emits when value is changed | \n\n |
on-view-change | \n(data, index) | \nfires when render month is changed | \nv2.5.12 | \n
on-select-single-date | \n(currentValue) | \nfires when date is selected in radio mode | \n2.7.6 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getDates | \n\n | get current date list | \nv2.5.11 | \n
switchViewToToday | \n\n | render current month | \nv2.5.12 | \n
switchViewToMonth | \n(year, month) | \nrender specified year and month | \nv2.5.12 | \n
switchViewToCurrentValue | \n\n | render with current value’s month | \nv2.5.12 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { InlineLoading } from 'vux'\n
\nrequire vux@^2.3.4
\nEdit document
\n Demo page
\n demo 原始链接
\n Demo source
import { InlineXNumber } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
width | \nString | \n50px | \n\n | width for number | \n
button-style | \nString | \nsquare | \n\n | button style, can be ‘round’ | \n
min | \nNumber | \n\n | \n | min value | \n
max | \nnumber | \n\n | \n | max value | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { LoadMore } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show-loading | \nBoolean | \ntrue | \n\n | if show loading icon | \n
tip | \nString | \n\n | \n | tip text. Show dot if there is no text and loading icon | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Loading } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | visibility of the component. Use v-model for binding before v2.5.7, otherwise use :show | \n
text | \nString | \n\n | \n | loading text | \n
position | \nString | \nfixed | \n\n | position, default is fixed , you can use absolute | \n
transition | \nString | \nvux-mask | \n\n | transition name | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent area | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Marquee, MarqueeItem } from 'vux'\n
\nMarquee
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
interval | \nNumber | \n2000 | \n\n | switch interval time | \n
duration | \nNumber | \n300 | \n\n | animation time | \n
direction | \nString | \nup | \n\n | direction of animation, can be in [‘up’, ‘down’] | \n
item-height | \nNumber | \n\n | \n | item height, set value if marquee initial state is hidden | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontainer of marquee items | \n\n |
MarqueeItem
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent slot | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Masker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
color | \nString | \n0, 0, 0 | \n\n | the mask’s color in rgb format, for example, ‘0, 0, 0’ | \n
opacity | \nNumber | \n0.5 | \n\n | the opacity of the mask | \n
fullscreen | \nBoolean | \nfalse | \nv2.1.1-rc.14 | \nif masker is fullscreen | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent below the mask | \n\n |
content | \ncontent above the mask | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Msg } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | text to show operation status | \n
description | \nString | \n\n | \n | description | \n
icon | \nString | \nsuccess | \n\n | icon type. You can use success , warn , info , waiting | \n
buttons | \nArray | \n\n | \n | buttons list. A button item includes text , type (the same as x-button type), link , onClick | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
buttons | \nused for custom buttons | \n\n |
description | \nused for custom description | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Panel } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header | \nString | \n\n | \n | header title | \n
footer | \nObject | \n\n | \n | footer config, {url: url, title: title} | \n
list | \nArray | \n\n | \n | content list [{title, desc, src, fallbackSrc, meta:{source,date,other |