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 { 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 { 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 { 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 { 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 { 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 { 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 { Picker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | picker value, use v-model for binding | \n
data | \nArray | \n\n | \n | array list | \n
columns | \nNumber | \n\n | \n | how many columns in chained-mode | \n
fixed-columns | \nNumber | \n\n | \n | how many columns will show | \n
column-width | \nArray | \n\n | v2.2.0 | \ncustom width for each picker column, for example for a 3-column picker: [1/2, 1/5] | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value is changed | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getNameValues | \n\n | get labels of current value | \nv2.3.1 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { PopupPicker } from 'vux'\n
\n\n other props are the same as `Picker`\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | picker value, use v-model for binding | \n
title | \nString | \n\n | \n | label text | \n
cancel-text | \nString | \n\n | \n | popup cancel text | \n
confirm-text | \nString | \n\n | \n | popup confirm text | \n
placeholder | \nString | \n\n | \n | placeholder | \n
show-name | \nBoolean | \nfalse | \n\n | if show names instead of keys | \n
inline-desc | \nString | \n\n | \n | description text below label | \n
show | \nBoolean | \n\n | \n | popup show (supports the .sync modifier next) | \n
value-text-align | \nString | \nright | \nv2.1.0-rc.3 | \nvalue’s text align | \n
display-format | \nFunction | \n\n | v2.1.1-rc.7 | \nused to format display text on cell, param: (currentValue) | \n
popup-style | \nObject | \n\n | v2.5.2 | \npopup style | \n
popup-title | \nString | \n\n | v2.7.0 | \npopup title | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \ntitle slot, use scope.labelClass and scope.labelStyle to inherit label styles | \nv2.3.7 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value is changed | \n\n |
on-show | \n\n | emits when popup shows | \n\n |
on-hide | \n(closeType) true表示confirm(选择确认), false表示其他情况的关闭 | \nemits when popup is closed | \n\n |
on-shadow-change | \n(Array ids, Array names) | \nemits when picker value is changed | \nv2.5.6 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { PopupRadio } from 'vux'\n
\nprops are the same as cell’s and radio’s. Be aware that it doesnot support fillMode.
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
readonly | \nString | \n\n | v2.3.6 | \nreadonly, shown like a cell | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
popup-header | \npopup header slot | \nv2.3.3 | \n
each-item | \ncustom how label displays | \nv2.3.7 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | fires when popup shows | \nv2.6.5 | \n
on-hide | \n\n | fires when popup hides | \nv2.6.5 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Radio } from 'vux'\n
\n <group>\n <radio title=\"title\" :options=\"options\" v-model=\"value\"></radio>\n </group>\n
\noptions
can be plain array, or object list with key=> value:
const options = [ 'China', 'Japan' ]\n\nconst options2 = [{\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '001',\n value: 'radio001'\n}, {\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '002',\n value: 'radio002'\n}]\n
\n`radio` should be used in `Group`.
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | radio value, use v-model for binding | \n
options | \nArray | \n\n | \n | option list, can be plain array or array with key=>value | \n
fill-mode | \nBoolean | \nfalse | \n\n | if add an option user can fill | \n
fill-placeholder | \nString | \n\n | \n | placeholder for fill input | \n
fill-label | \nString | \n\n | \n | label for fill input | \n
disabled | \nBoolean | \n\n | v2.3.8 | \ndisable selecting | \n
selected-label-style | \nObject | \n\n | v2.4.0 | \nset selected label style | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
each-item | \ncustom how to display each item | \nv2.3.5 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Range } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | form value, use v-model for binding | \n
decimal | \nBoolean | \nfalse | \n\n | if show decimals when value is changed | \n
min | \nNumber | \n0 | \n\n | min number | \n
max | \nNumber | \n100 | \n\n | max number | \n
step | \nNumber | \n1 | \n\n | step value | \n
disabled | \nBoolean | \nfalse | \n\n | if disabled | \n
minHTML | \nString | \n\n | \n | custom html template for min value | \n
maxHTML | \nString | \n\n | \n | custom html template for max value | \n
disabled-opacity | \nNumber | \n\n | \n | opacity value when is disabled | \n
rangeBarHeight | \nNumber | \n1 | \n\n | range bar’s height | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value is changed | \nv2.2.2 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Rater } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
max | \nNumber | \n5 | \n\n | total star number | \n
value | \nNumber | \n0 | \n\n | selected value, use v-model for binding | \n
disabled | \nBoolean | \nfalse | \n\n | if disabled | \n
star | \nString | \n★ | \n\n | start’s symbol text | \n
active-color | \nString | \n#fc6 | \n\n | symbol color when selected | \n
margin | \nNumber | \n2 | \n\n | margin value | \n
font-size | \nNumber | \n25 | \n\n | font size | \n
min | \nNumber | \n0 | \nv2.7.9 | \nmin value | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Search } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
placeholder | \nString | \n搜索(search) | \n\n | placeholder text | \n
cancel-text | \nString | \n取消(cancel) | \n\n | cancel text | \n
value | \nString | \n\n | \n | input value, use v-model for binding | \n
results | \nArray | \n\n | \n | search results, [{title: ‘hello’, otherData: otherValue}], will not show when auto-fixed is false | \n
auto-fixed | \nBoolean | \ntrue | \n\n | if auto fixed on top when input gets focus | \n
top | \nString | \n0px | \n\n | top value when fixed on top | \n
position | \nString | \nfixed | \n\n | position value when pin the component on the top, one of fixed , absolute | \n
auto-scroll-to-top | \nBoolean | \nfalse | \n\n | if auto scroll to top when input gets focus | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nslot above search result | \n\n |
right | \nslot on the right of input | \n\n |
left | \nslot on the left of input | \nv2.3.5 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-submit | \n(value) | \nemits when form is submitted | \n\n |
on-cancel | \n\n | emits when cancel button is clicked | \n\n |
on-change | \n(value) | \nemits when value is changed | \n\n |
on-result-click | \n(item) | \nemits when result item is clicked | \n\n |
on-focus | \n\n | when input gets focus | \nv2.1.1-rc.10 | \n
on-blur | \n\n | fires when input losts focus | \nv2.6.3 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
setFocus | \n\n | set focus on input. you should call this method in a click event’s callback function on Safari | \n\n |
setBlur | \n\n | make input lost focus | \nv2.3.6 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Selector } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString Number Object | \n\n | \n | form value, use v-model for binding | \n
title | \nString | \n\n | \n | label text | \n
direction | \nString | \n\n | \n | align value | \n
options | \nArray | \n\n | \n | option list, ['one', 'two'] or [{ key: KEY, value: VALUE }] | \n
name | \nString | \n\n | \n | form name | \n
placeholder | \nString | \n\n | \n | placeholder | \n
readonly | \nBoolean | \nfalse | \n\n | if the select is readonly | \n
value-map | \nArray | \n\n | v2.7.2 | \nset a [value, label] pair for automatically transforming API data | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nemits when value is changed | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getFullValue | \n\n | get full value including all the props(if option items are object) | \nv2.7.2 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
<group>\n <x-address title=\"title\" v-model=\"value\"></x-address>\n </group>\n
\nimport { XAddress } from 'vux'\n\n// you can import built-in data\nimport { XAddress, ChinaAddressV3Data } from 'vux'\n\n// if you need older data\nimport { XAddress, ChinaAddressV1Data } from 'vux'\n
\n\nyou can view source data at [src/datas](https://github.com/airyland/vux/tree/v2/src/datas).\n
\n`x-address` should be used in `Group`
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
raw-value | \nBoolean | \nfalse | \n\n | if the initial value is string value instead of id value | \n
title | \nString | \n\n | \n | label text | \n
value | \nArray | \n\n | \n | form value, use v-model for binding | \n
list | \nArray | \n\n | \n | address data | \n
inline-desc | \nString | \n\n | \n | description text below label | \n
placeholder | \nString | \n\n | \n | placeholder | \n
hide-district | \nBoolean | \nfalse | \n\n | if hide district column | \n
value-text-align | \nString | \nright | \n\n | align setting of value | \n
popup-style | \nObject | \n\n | v2.5.2 | \npopup style | \n
show | \nBoolean | \n\n | v2.5.8 | \npopup show (supports the .sync modifier next) | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \ntitle slot | \nv2.3.8 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-hide | \n\n | emits when being closed | \n\n |
on-show | \n\n | emits when being open | \n\n |
on-shadow-change | \n(Array ids, Array names) | \nemits when picker value is changed | \nv2.5.6 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XButton } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
type | \nString | \ndefault | \n\n | button style type, one of default, primary, warn | \n
disabled | \nBoolean | \nfalse | \n\n | if disable the button | \n
text | \nString | \n\n | \n | button text, has the same function as default slot | \n
mini | \nBoolean | \nfalse | \n\n | if use smaller style | \n
plain | \nBoolean | \nfalse | \n\n | if use plain styles which has no backgroundColor | \n
action-type | \nString | \n\n | \n | button’s type value, one of submit , button , reset | \n
link | \nString | \n\n | v2.3.5 | \nvue-router path, BACK is alias to go(-1) | \n
show-loading | \nBoolean | \nfalse | \n\n | show loading icon | \n
gradients | \nArray | \n\n | v2.7.4 | \niOS design gradients, Array length should be 2 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nbutton text | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XInput } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | input value, use v-model for binding | \n
type | \nString | \ntext | \n\n | input type, one of text ,number ,email ,password ,tel | \n
is-type | \nString Function | \n\n | \n | custom validating function, should return {valid:true} or {valid:false, msg: error msg} | \n
required | \nBoolean | \nfalse | \n\n | if is required | \n
title | \nString | \n\n | \n | label text | \n
placeholder | \nString | \n\n | \n | placeholder | \n
show-clear | \nBoolean | \ntrue | \n\n | if show clear icon | \n
min | \nNumber | \n\n | \n | minlength for input | \n
max | \nNumber | \n\n | \n | maxlength for input | \n
disabled | \nBoolean | \nfalse | \n\n | if input is disabled | \n
readonly | \nBoolean | \nfalse | \n\n | if input is readonly | \n
debounce | \nNumber | \n\n | \n | debounce time | \n
placeholder-align | \nString | \nleft | \nv2.1.1-rc.8 | \nplaceholder align value | \n
text-align | \nString | \nleft | \n\n | text-align setting for value | \n
label-width | \nString | \n\n | v2.2.1-rc.4 | \nset label width which will not be overwritten by $parent.labelWidth | \n
mask | \nString | \n\n | v2.6.1 | \n(beta) value mask, 9 for DIGIT, A for ALPHA, S for ALPHA AND DIGIT | \n
should-toast-error | \nString | \ntrue | \nv2.6.3 | \nwhether toast error when clicking on error icon | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
label | \nundefined | \n\n |
restricted-label | \nundefined | \n\n |
right | \nundefined | \n\n |
right-full-height | \nundefined | \nv2.8.1 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-blur | \n(value, $event) | \nundefined | \n\n |
on-focus | \n(value, $event) | \nundefined | \n\n |
on-enter | \n(value, $event) | \nundefined | \n\n |
on-change | \n(value) | \nundefined | \n\n |
on-click-error-icon | \n(error) | \nfires when clicking error icon | \nv2.6.3 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
focus | \n\n | get input focus | \n\n |
blur | \n\n | remove focus from input | \n\n |
reset | \n(value = '') | \nreset input value and clear errors | \nv2.1.1-rc.10 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XNumber } from 'vux'\n
\n <group>\n <x-number title=\"title\" v-model=\"value\"></x-number>\n </group>\n
\n`x-number` shoule be used in `Group`
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | form value, use v-model for binding | \n
title | \nString | \n\n | \n | label text | \n
min | \nNumber | \n\n | \n | minimum number of value | \n
max | \nNumber | \n\n | \n | maximum number of value | \n
step | \nNumber | \n1 | \n\n | step value | \n
fillable | \nBoolean | \nfalse | \n\n | if use can fill the number | \n
width | \nString | \n50px | \n\n | width of the input element | \n
button-style | \nString | \nsquare | \n\n | button styles, [‘square’, ‘round’] | \n
align | \nString | \nright | \n\n | align setting of the selecting area | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XSwitch } from 'vux'\n
\n <group>\n <x-switch title=\"title\" v-model=\"value\"></x-switch>\n </group>\n
\n`x-switch` should be used in `Group`.
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | label text | \n
disabled | \nBoolean | \nfalse | \n\n | if disabled | \n
value | \nBoolean | \nfalse | \n\n | component’s value, use v-model for binding | \n
inline-desc | \nString | \n\n | \n | desctiption text below the label | \n
prevent-default | \nBoolean | \nfalse | \nv2.5.0 | \nprevent from setting value on being clicked | \n
value-map | \nArray | \n[false, true] | \nv2.7.0 | \ncustomize not-boolean values | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \ntriggers when value change, params is (currentValue) | \n\n |
on-click | \n(newVal, oldVal) | \ntriggers when being clicked | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XTextarea } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | v2.1.1-rc.8 | \nlabel text | \n
inline-desc | \nString | \n\n | v2.1.1-rc.8 | \ndescription text below title | \n
show-counter | \nBoolean | \ntrue | \n\n | if show the text length counter | \n
max | \nNumber | \n0 | \n\n | maxlength limit | \n
value | \nString | \n\n | \n | textarea’s value, use v-model for binding | \n
name | \nString | \n\n | \n | textarea’s name | \n
placeholder | \nString | \n\n | \n | placeholder | \n
rows | \nNumber | \n3 | \n\n | textarea’s rows attribute | \n
cols | \nNumber | \n30 | \n\n | textarea’s cols attribute | \n
height | \nNumber | \n0 | \n\n | height | \n
readonly | \nBoolean | \nfalse | \n\n | textarea’s readonly attribute | \n
disabled | \nBoolean | \nfalse | \n\n | textarea’s disabled attribute | \n
autosize | \nBoolean | \nfalse | \nv2.2.1-rc.6 | \nwhether set auto height for textarea | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
label | \nundefined | \nv2.1.1-rc.8 | \n
restricted-label | \nundefined | \nv2.1.1-rc.8 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \ntriggers when value changes | \n\n |
on-focus | \n\n | focus event | \nv2.1.1-rc.11 | \n
on-blur | \n\n | blur event | \nv2.1.1-rc.11 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
updateAutosize | \n\n | reset autosize, if value is not empty initially, you should call this function to update size | \nv2.5.1 | \n