编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { CellFormPreview } from 'vux'\n
\n\n `CellFormPreview` 需要在 `Group` 组件中使用。\n
\n <group>\n <cell title=\"Total\" value=\"¥1024\"></cell>\n <cell-form-preview :list=\"list\"></cell-form-preview>\n </group>\n
\nimport { CellFormPreview, Group, Cell } from 'vux'\n\nexport default {\n components: {\n CellFormPreview,\n Group,\n Cell\n },\n data () {\n return {\n list: [{\n label: 'Apple',\n value: '3.29'\n }, {\n label: 'Banana',\n value: '1.04'\n }, {\n label: 'Fish',\n value: '8.00'\n }]\n }\n }\n}\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
list | \nArray | \n\n | v2.2.0 | \n内容列表,键值包括label 和value ,可缺值 | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \n是否显示边框与左边的间隙 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Cell } from 'vux'\n
\n <group>\n <cell title=\"title\" value=\"value\"></cell>\n </group>\n
\ncell只能在`Group`中使用
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | 左边标题文字 | \n
value | \nString | \n\n | \n | 右侧文字,复杂的样式布局请使用slot | \n
inline-desc | \nString | \n\n | \n | 标题下面文字,一般为说明文字 | \n
link | \nString Object | \n\n | \n | 点击链接,可以为http(s)协议,也可以是 vue-router 支持的地址形式 | \n
is-link | \nBoolean | \nfalse | \n\n | 是否为链接,如果是,右侧将会出现指引点击的右箭头 | \n
primary | \nString | \ntitle | \n\n | 可选值为 [‘title’, ‘content’],对应的div会加上weui_cell_primary类名实现内容宽度自适应 | \n
is-loading | \nBoolean | \nfalse | \nv2.2.0 | \n是否显示加载图标,适用于异步加载数据的场景 | \n
value-align | \nString | \nleft | \nv2.2.0 | \n文字值对齐方式,可选值为 left right。当设为 right 时,primary 值将会设为 content | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \n是否显示边框与左边的间隙 | \n
arrow-direction | \nString | \n\n | v2.2.1-rc.1 | \n右侧箭头方向,可选有 up down | \n
disabled | \nBoolean | \n\n | v2.2.2 | \n对 label 和箭头(如果使用 is-link )显示不可操作样式 | \n
align-items | \nString | \ncenter | \nv2.6.4 | \nalign-items 样式值 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n右侧内容,相比于value的优点是可以用复杂的样式或者调用组件 | \n\n |
value | \n[废弃] 同默认slot | \n\n |
icon | \n标题左侧的图像位置 | \n\n |
after-title | \n标题右侧位置 | \n\n |
child | \ncell的直接子元素,因此可以添加一个相对于cell绝对定位的元素 | \n\n |
inline-desc | \ninline-desc 内容,和 prop:inline-desc 功能一样,但是可以使用 html | \nv2.2.1-rc.6 | \n
title | \ntitle 插槽,方便自定义样式 | \nv2.3.3 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Checker } from 'vux'\n
\nChecker
是比Radio
或者Checklist
更加灵活的选择组件,可以自定义需要的布局样式。
Checker
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
default-item-class | \nString | \n\n | \n | 默认状态class | \n
selected-item-class | \nString | \n\n | \n | 选中样式class | \n
disabled-item-class | \nString | \n\n | \n | 不可选样式class | \n
type | \nString | \nradio | \n\n | 类型,单选为radio , 多选为checkbox | \n
value | \nString Array | \n\n | \n | 表单值,使用v-model 绑定 | \n
max | \nNumber | \n\n | \n | 最多可选个数,多选时可用 | \n
radio-required | \nBoolean | \nfalse | \nv2.6.3 | \n在单选模式下是否必选一个值。设为 true 后点击当前选中项不会取消选中。 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \nvalue值变化时触发 | \n\n |
CheckerItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 当前项的值 | \n
disabled | \nBoolean | \nfalse | \n\n | 是否为不可选 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-item-click | \n(itemValue, itemDisabled) | \n当前项被点击时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Checklist } from 'vux'\n
\n从 v2.6.2 开始,max=1即为单选模式,不会要求先取消上一个选中的才能选中下一个值。
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | 表单值 | \n
title | \nString | \n\n | \n | 标题 | \n
required | \nBoolean | \nfalse | \n\n | 是否为必选 | \n
options | \nArray | \n\n | \n | 选项列表,可以为[{key:'name',value:'value',inlineDesc:'inlineDesc'}] 的形式 | \n
max | \nNumber | \n\n | \n | 最多可选个数 | \n
min | \nNumber | \n\n | \n | 最少可选个数 | \n
random-order | \nBoolean | \nfalse | \n\n | 是否随机打乱选项顺序 | \n
check-disabled | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \n是否进行可选检测,默认情况下当选择个数等于可选个数(max)时,其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。 | \n
label-position | \nString | \nright | \nv2.2.1-rc.4 | \nlabel 位置,可以设置为 left 或者 right | \n
disabled | \nString | \n\n | v2.3.8 | \n是否禁用操作 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value, label) | \n值变化时触发,参数为 (value, label),其中 label 参数在 v2.5.7 后支持 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getFullValue | \n\n | 获取值和对应的显示文字 | \nv2.6.4 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { DatetimeRange } from 'vux'\n
\n\n该组件和 `Datetime` 组件不同的地方是`年月日`集中显示在一栏,适合范围不大的日期选择。\n
\n需要在`Group`组件里使用\n
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | 标题文字 | \n
value | \nArray | \n\n | \n | 表单值,v-model 绑定。比如,[‘2017-01-15’, ‘03’, ‘05’] | \n
inline-desc | \nString | \n\n | \n | 描述字符 | \n
placeholder | \nString | \n\n | \n | 提示文字,当value 为空时显示 | \n
start-date | \nString | \n\n | \n | 限定最小日期,注意该限制只能限定到日期,不能限定到小时分钟 | \n
end-date | \nString | \n\n | \n | 限定最大日期,注意该限制只能限定到日期,不能限定到小时分钟 | \n
format | \nString | \nYYYY-MM-DD | \n\n | 日期栏的显示格式 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n表单值变化时触发, 参数 (newVal) | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Datetime } from 'vux'\n
\n\n需要在`Group`组件里使用\n
\n该组件支持以plugin
形式调用:
// 以 plugin 形式使用时,请在入口处引入:\nimport { DatetimePlugin } from 'vux'\nVue.use(DatetimePlugin)\n\n// 组件内使用\nthis.$vux.datetime.show({\n value: '', // 其他参数同 props\n onHide () {\n const _this = this\n },\n onShow () {\n const _this = this\n }\n})\n\nthis.$vux.datetime.hide()\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
format | \nString | \nYYYY-MM-DD | \n\n | 时间格式,不支持特殊字符,只能类似 YYYY-MM-DD HH:mm:ss 这样的格式 | \n
title | \nString | \n\n | \n | 标题 | \n
value | \nString | \n\n | \n | 表单值,v-model 绑定 | \n
inline-desc | \nString | \n\n | \n | 描述字符 | \n
placeholder | \nString | \n\n | \n | 提示文字,当value 为空时显示 | \n
min-year | \nNumber | \n\n | \n | 可选择的最小年份 | \n
max-year | \nNumber | \n\n | \n | 可选择的最大年份 | \n
min-hour | \nNumber | \n0 | \n\n | 限定小时最小值 | \n
max-hour | \nNumber | \n23 | \n\n | 限定小时最大值 | \n
confirm-text | \nString | \nok(确认) | \n\n | 确认按钮文字 | \n
cancel-text | \nString | \ncancel(取消) | \n\n | 取消按钮文字 | \n
clear-text | \nString | \n\n | \n | 显示在中间的自定义按钮的文字 | \n
year-row | \nString | \n{value} | \n\n | 年份的渲染模板 | \n
month-row | \nString | \n{value} | \n\n | 月份的渲染模板 | \n
day-row | \nString | \n{value} | \n\n | 日期的渲染模板 | \n
hour-row | \nString | \n{value} | \n\n | 小时的渲染模板 | \n
minute-row | \nString | \n{value} | \n\n | 分钟的渲染模板 | \n
start-date | \nString | \n\n | \n | 限定最小日期,格式必须为 YYYY-MM-DD,注意该限制只能限定到日期,不能限定到小时分钟。小时限定请使用min-hour 和max-hour | \n
end-date | \nString | \n\n | \n | 限定最大日期,格式必须为 YYYY-MM-DD,注意该限制只能限定到日期,不能限定到小时分钟 | \n
required | \nBoolean | \nfalse | \n\n | 是否必填 | \n
display-format | \nFunction | \n\n | v2.1.1-rc.11 | \n自定义显示值 | \n
readonly | \nString | \n\n | v2.3.6 | \n只读模式,显示类似于 cell | \n
show | \nBoolean | \n\n | v2.3.7 | \n控制显示,要求 vue^2.3 | \n
minute-list | \nArray | \n\n | v2.3.7 | \n定义分钟列表,比如 [‘00’, ‘15’, ‘30’, ‘45’] | \n
hour-list | \nArray | \n\n | v2.3.7 | \n定义小时列表,比如 [‘09’, ‘10’, ‘11’, ‘12’] | \n
default-selected-value | \nString | \n\n | v2.4.1 | \n设置默认选中日期,当前 value 为空时有效 | \n
compute-hours-function | \nFunction | \n\n | v2.5.5 | \n动态设置小时列表,参数为 (value, isToday, generateRange) | \n
compute-days-function | \nFunction | \n\n | v2.6.1 | \n动态设置日期列表,参数为 ({year, month, min, max}, generateRange) | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n触发元素内容 | \n\n |
title | \ntitle slot | \nv2.3.6 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n表单值变化时触发, 参数 (newVal) | \n\n |
on-clear | \n\n | 点击显示在中间的自定义按钮时触发 | \n\n |
on-show | \n\n | 弹窗显示时触发 | \n\n |
on-hide | \n(type) , type is one of [cancel, confirm] | \n弹窗关闭时触发 | \nv2.7.4 | \n
on-cancel | \n\n | 点击取消按钮或者遮罩时触发,等同于事件 on-hide(cancel) | \nv2.7.4 | \n
on-confirm | \n\n | 点击确定按钮时触发,等同于事件 on-hide(confirm) | \nv2.7.4 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { FormPreview } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header-label | \nString | \n\n | \n | 头部标题 | \n
header-value | \nString | \n\n | \n | 头部内容 | \n
body-items | \nArray | \n[] | \n\n | 主体内容列表, [{label:‘label’,value:‘value’}] | \n
footer-buttons | \nArray | \n[] | \n\n | 底部按钮列表,default 为灰色样式,primary 文字为高亮颜色, [{style: “primary”, text: “text”, onButtonClick: fn(prop:name), link: “/path”}] | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Group } from 'vux'\n
\nGroup
是一个特殊的表单wrapper
组件,主要用于将表单分组,单个表单元素也算一组。常见的表单组件都必须
作为Group
的子组件。 属于Group
子组件的有:Cell, XInput, XTextarea, XSwitch, Calendar, XNumber, Radio, XAddress, Datetime, Selector
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | 分组标题 | \n
title-color | \nString | \n\n | \n | 分组标题文字颜色 | \n
label-width | \nString | \n\n | \n | 为子元素设定统一label宽度 | \n
label-align | \nString | \n\n | \n | 为子元素设定统一对齐方式 | \n
label-margin-right | \nString | \n\n | \n | 为子元素设定统一的右边margin | \n
gutter | \nString | \n\n | \n | 设定group的上边距,只能用于没有标题时 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n子组件插槽 | \n\n |
title | \n标题插槽 | \nv2.5.1 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { InlineCalendar } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString Array | \n\n | \n | 当前选中日期,使用v-model 绑定。值为字符串(包括空字符串)时表示单选日期,为数组(包括空数组)时表示多选。 | \n
render-month | \nArray | \n\n | \n | 指定渲染日期,如 [2018, 8] | \n
start-date | \nString | \n\n | \n | 起始日期,格式为 YYYY-MM-dd | \n
end-date | \nString | \n\n | \n | 结束日期,格式为YYYY-MM-dd | \n
show-last-month | \nBoolean | \ntrue | \n\n | 是否显示上个月的日期 | \n
show-next-month | \nBoolean | \ntrue | \n\n | 是否显示下个月的日期 | \n
highlight-weekend | \nBoolean | \nfalse | \n\n | 是否高亮周末 | \n
return-six-rows | \nBoolean | \ntrue | \n\n | 是否总是渲染6行日期 | \n
hide-header | \nBoolean | \nfalse | \n\n | 是否隐藏日历头部 | \n
hide-week-list | \nBoolean | \nfalse | \n\n | 是否隐藏星期列表 | \n
replace-text-list | \nObject | \n\n | \n | 替换列表,可以将默认的日期换成文字,比如今天的日期替换成今,{‘TODAY’:‘今’} | \n
weeks-list | \nArray | \n[‘Su’, ‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’] | \n\n | 星期列表,从周日开始 | \n
render-function | \nFunction | \n\n | \n | 用于为特定日期添加额外的html内容,参数为(行index,列index,日期详细属性) | \n
render-on-value-change | \nBoolean | \ntrue | \n\n | 当日期变化时是否重新渲染日历,如果是渲染了多个日历的话需要设为false | \n
disable-past | \nBoolean | \nfalse | \n\n | 禁止选择过去的日期,该选项可以与 start-date 同时使用 | \n
disable-future | \nBoolean | \nfalse | \n\n | 禁止选择未来的日期,该选项可以 end-date 同时使用 | \n
marks | \nArray | \n\n | v2.6.0 | \n(beta) 自定义日期标记 | \n
disable-weekend | \nBoolean | \nfalse | \nv2.7.0 | \n是否禁用周六日 | \n
disable-date-function | \nFunction | \n\n | v2.7.0 | \n自定义标记特定日期是否应该禁用,返回 true 表示禁用,false 表示不禁用,不返回表示和原有逻辑一致(这样不影响和 disable-weekend 等禁用属性同时使用) | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
each-day | \n用以自定义每一天的显示渲染,推荐使用该 slot 来替代 render-function | \nv2.3.5 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n\n | 值变化时触发 | \n\n |
on-view-change | \n(data, index) | \n渲染月份变化时触发。初始化时会触发一次,如果不希望处理初始化时的触发,可以检查第二个参数是否为 0 | \nv2.5.12 | \n
on-select-single-date | \n(currentValue) | \n单选模式下选中日期时触发 | \n2.7.6 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getDates | \n\n | 获取当前日期列表 | \nv2.5.11 | \n
switchViewToToday | \n\n | 渲染当天所在月份 | \nv2.5.12 | \n
switchViewToMonth | \n(year, month) | \n渲染特定年月日期 | \nv2.5.12 | \n
switchViewToCurrentValue | \n\n | 渲染当前值所在月份 | \nv2.5.12 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Picker } from 'vux'\n
\n\n 请确保列表项的`value`值是字符串,使用数字会出错。\n
\n 如果你的业务接口返回数字值为数字,需要你先处理成字符串;同样,获取到值时为字符串,你需要自己转换成数字。\n
非联动情况下,列表数据格式示例:
\n// data\n[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']]\n\n// 或者使用 name => value 的形式\n[[{\n name: '2019届5班',\n value: '1'\n}, {\n name: '2019届4班',\n value: '2'\n}]]\n\n// value\n['小米', '小米1']\n
\n联动时,列表数据格式示例:
\n// data\n[{\n name: '中国',\n value: 'china',\n parent: 0\n}, {\n name: '美国',\n value: 'USA',\n parent: 0\n}, {\n name: '广东',\n value: 'china001',\n parent: 'china'\n}, {\n name: '广西',\n value: 'china002',\n parent: 'china'\n}, {\n name: '美国001',\n value: 'usa001',\n parent: 'USA'\n}, {\n name: '美国002',\n value: 'usa002',\n parent: 'USA'\n}, {\n name: '广州',\n value: 'gz',\n parent: 'china001'\n}, {\n name: '深圳',\n value: 'sz',\n parent: 'china001'\n}, {\n name: '广西001',\n value: 'gx001',\n parent: 'china002'\n}, {\n name: '广西002',\n value: 'gx002',\n parent: 'china002'\n}, {\n name: '美国001_001',\n value: '0003',\n parent: 'usa001'\n}, {\n name: '美国001_002',\n value: '0004',\n parent: 'usa001'\n}, {\n name: '美国002_001',\n value: '0005',\n parent: 'usa002'\n}, {\n name: '美国002_002',\n value: '0006',\n parent: 'usa002'\n}]\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | 表单值,使用 v-model 绑定 | \n
data | \nArray | \n\n | \n | 选项列表数据 | \n
columns | \nNumber | \n\n | \n | 指定联动模式下的列数,当不指定时表示非联动 | \n
fixed-columns | \nNumber | \n\n | \n | 指定显示多少列,隐藏多余的 | \n
column-width | \nArray | \n\n | v2.2.0 | \n定义每一列宽度,只需要定义除最后一列宽度,最后一列自动宽度, 比如对于3列选择,可以这样:[1/2, 1/5] | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n选择值变化时触发 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getNameValues | \n\n | 根据 value 获取字面值 | \nv2.3.1 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { PopupPicker } from 'vux'\n
\n\n 其他选项与`picker`一致\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nArray | \n\n | \n | 表单值,使用v-model绑定 | \n
title | \nString | \n\n | \n | 标题 | \n
cancel-text | \nString | \n\n | \n | 弹窗的取消文字 | \n
confirm-text | \nString | \n\n | \n | 弹窗的确认文字 | \n
placeholder | \nString | \n\n | \n | 提示文字 | \n
show-name | \nBoolean | \nfalse | \n\n | 是否显示文字值而不是key | \n
inline-desc | \nString | \n\n | \n | Cell的描述文字 | \n
show | \nBoolean | \n\n | \n | 显示 (支持.sync修饰 next) | \n
value-text-align | \nString | \nright | \nv2.1.0-rc.3 | \nvalue 对齐方式(text-align) | \n
display-format | \nFunction | \n\n | v2.1.1-rc.7 | \n自定义在cell上的显示格式,参数为当前 value,使用该属性时,show-name 属性将失效 | \n
popup-style | \nObject | \n\n | v2.5.2 | \n弹窗样式,可以用于强制指定 z-index | \n
popup-title | \nString | \n\n | v2.7.0 | \n弹窗标题 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \n标题插槽,使用 scope.labelClass 和 scope.labelStyle 继承原有样式(实现样式受控于 group label 设置) | \nv2.3.7 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n值变化时触发 | \n\n |
on-show | \n\n | 弹窗出现时触发 | \n\n |
on-hide | \n(closeType) true表示confirm(选择确认), false表示其他情况的关闭 | \n弹窗关闭时触发 | \n\n |
on-shadow-change | \n(Array ids, Array names) | \npicker 值变化时触发,即滑动 picker 时触发 | \nv2.5.6 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { PopupRadio } from 'vux'\n
\n属性同 cell 和 Radio 的属性,需要注意的是不支持 fillMode。
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
readonly | \nString | \n\n | v2.3.6 | \n只读样式,类似于 cell | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
popup-header | \n弹窗顶部 | \nv2.3.3 | \n
each-item | \n自定义每个条目显示内容 | \nv2.3.7 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | 弹窗显示时触发 | \nv2.6.5 | \n
on-hide | \n\n | 弹窗关闭时触发 | \nv2.6.5 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Radio } from 'vux'\n
\n <group>\n <radio title=\"title\" :options=\"options\" v-model=\"value\"></radio>\n </group>\n
\noptions
可以为简单数组,也可以为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`只能在`Group`中使用
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 表单值,使用v-model 绑定 | \n
options | \nArray | \n\n | \n | 可选列表,可以用字符串组成的数组或者 key=>value 的形式 | \n
fill-mode | \nBoolean | \nfalse | \n\n | 是否可填写 | \n
fill-placeholder | \nString | \n\n | \n | 可填写时的提示文字 | \n
fill-label | \nString | \n\n | \n | 可填写时的label文字 | \n
disabled | \nBoolean | \n\n | v2.3.8 | \n禁用操作 | \n
selected-label-style | \nObject | \n\n | v2.4.0 | \n设置选中时的 label 样式,比如使用其他颜色更容易区分是否为选中项 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
each-item | \n自定义如何显示每一项 | \nv2.3.5 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Range } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | 表单值,使用v-model 绑定 | \n
decimal | \nBoolean | \nfalse | \n\n | 是否在变化时显示小数 | \n
min | \nNumber | \n0 | \n\n | 可选最小值 | \n
max | \nNumber | \n100 | \n\n | 可选最大值 | \n
step | \nNumber | \n1 | \n\n | 步长 | \n
disabled | \nBoolean | \nfalse | \n\n | 是否禁用 | \n
minHTML | \nString | \n\n | \n | 最小值显示的html模板 | \n
maxHTML | \nString | \n\n | \n | 最大值显示的html模板 | \n
disabled-opacity | \nNumber | \n\n | \n | 禁用样式的透明度 | \n
rangeBarHeight | \nNumber | \n1 | \n\n | 高度 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n绑定值变化时触发事件 | \nv2.2.2 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Rater } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
max | \nNumber | \n5 | \n\n | 最多可选个数 | \n
value | \nNumber | \n0 | \n\n | 值,使用 v-model 绑定 | \n
disabled | \nBoolean | \nfalse | \n\n | 是否禁用 | \n
star | \nString | \n★ | \n\n | 字符 | \n
active-color | \nString | \n#fc6 | \n\n | 选中时的颜色 | \n
margin | \nNumber | \n2 | \n\n | 间隙值 | \n
font-size | \nNumber | \n25 | \n\n | 字体大小 | \n
min | \nNumber | \n0 | \nv2.7.9 | \n最小值 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Search } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
placeholder | \nString | \n搜索(search) | \n\n | 提示文字 | \n
cancel-text | \nString | \n取消(cancel) | \n\n | 取消文字 | \n
value | \nString | \n\n | \n | 表单值,v-model 绑定 | \n
results | \nArray | \n\n | \n | 指定搜索结果, 为带有 title key 的对象组成的数组,如 [{title: ‘hello’, otherData: otherValue}], auto-fixed 为 false 时不会显示结果 | \n
auto-fixed | \nBoolean | \ntrue | \n\n | 是否自动固定在顶端 | \n
top | \nString | \n0px | \n\n | 自动固定时距离顶部的距离 | \n
position | \nString | \nfixed | \n\n | 自动固定时的定位,一些布局下可能需要使用其他定位,比如absolute | \n
auto-scroll-to-top | \nBoolean | \nfalse | \n\n | Safari 下弹出键盘时可能会出现看不到input,需要手动滚动,启用该属性会在fix时滚动到顶端 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n搜索结果列表上面 slot,可以用来自定义搜索结果显示区域(results 设为空) | \n\n |
right | \n输入框右侧 slot | \n\n |
left | \n输入框左侧 slot | \nv2.3.5 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-submit | \n(value) | \n表单提交时触发 | \n\n |
on-cancel | \n\n | 点击取消 按钮时触发 | \n\n |
on-change | \n(value) | \n输入文字变化时触发 | \n\n |
on-result-click | \n(item) | \n点击结果条目时触发,原来的result-click 事件不符合规范已经废弃 | \n\n |
on-focus | \n\n | 输入框获取到焦点时触发 | \nv2.1.1-rc.10 | \n
on-blur | \n\n | 输入框失去焦点时触发 | \nv2.6.3 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
setFocus | \n\n | 获取 input 焦点,在 Safari 上你必须在 click 事件回调里使用才能生效 | \n\n |
setBlur | \n\n | 手动设置 input 失去焦点,一般用于在 on-submit 事件中实现隐藏手机键盘 | \nv2.3.6 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Selector } from 'vux'\n
\n <group>\n <selector title=\"title\" v-model=\"value\"></selector>\n </group>\n
\n`selector`只能在`Group`中使用
\n 在`iOS`上,如果没有指定`placeholder`也没有指定`value`,会出现弹出选择框时默认选中第一个值,但是确定后依然没有选中的情况。
因此对于`iOS`,组件内部在列表项前面增加了一个空的`option`,强制用户滑动选择一次以避免上面的问题。
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString Number Object | \n\n | \n | 表单值,使用v-model绑定 | \n
title | \nString | \n\n | \n | 标题 | \n
direction | \nString | \n\n | \n | 选项对齐方式 | \n
options | \nArray | \n\n | \n | 选项列表,可以为简单数组,或者 { key: KEY, value: VALUE } 结构的键值对数组。当使用键值对时,返回的value 为key 的值。 | \n
name | \nString | \n\n | \n | 表单的name名字 | \n
placeholder | \nString | \n\n | \n | 提示文字 | \n
readonly | \nBoolean | \nfalse | \n\n | 是否不可选择 | \n
value-map | \nArray | \n\n | v2.7.2 | \n设置键值对映射用以自动转换接口数据, 如 [‘value’, ‘label’] | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n值变化时触发 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
getFullValue | \n\n | 获取当前完整值,在使用了 valueMap 里可以用该方法来获取当前选中值的原始对象 | \nv2.7.2 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
<group>\n <x-address title=\"title\" v-model=\"value\"></x-address>\n </group>\n
\nimport { XAddress } from 'vux'\n\n// 如果你需要引入数据,如果你的版本低于 v2.2.0,请使用 ChinaAddressData\nimport { XAddress, ChinaAddressV4Data } from 'vux'\n\n// 如果需要引入旧版数据\nimport { XAddress, ChinaAddressV2Data } from 'vux'\n
\n\n如果你需要单独引入地址数据,可以在源码[src/datas](https://github.com/airyland/vux/tree/v2/src/datas)找到。\n
\n设计上 `x-address` 只能在 `Group` 中使用。但是你依然可以不在 `Group` 中使用,使用 `display:none` 隐藏然后用 :show.sync 来控制组件显示状态。
\n<x-address style=\"display:none;\" title=\"title\" v-model=\"value\" :list=\"addressData\" placeholder=\"请选择地址\" :show.sync=\"showAddress\"></x-address>\n
\n\nv4 和 v3 的区别是在 v4 里重庆多了县列表。\n
\n从 `2.1.1-rc.12` 开始,`直辖区`做了简化,原来是 北京市-北京市市辖区-东城区,现在是 北京市-市辖区-东城区。组件内部做了兼容,你以`raw-value`方式传入两种写法表现和旧版本一致,不会出错。\n
\n
\n从 `2.1.1-rc.15` 开始,数据必须指定版本,原来的 `ChinaAddressData` 废弃并停留在 `v2` 版本不再更新。\n
\n不同版本数据差异可以从[这里](https://github.com/airyland/china-area-data)找到。\n
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
raw-value | \nBoolean | \nfalse | \n\n | 指定初始化时绑定的数据是否为文本(即省市名,而不是id)类型,即对于非id值组件内部会转换为id。如果是异步设置value,只能使用id赋值。 | \n
title | \nString | \n\n | \n | 表单标题 | \n
value | \nArray | \n\n | \n | 表单值, 使用v-model 绑定 | \n
list | \nArray | \n\n | \n | 地址列表, 可以引入内置地址数据或者用自己的数据,但是需要按照一致的数据结构。 | \n
inline-desc | \nString | \n\n | \n | 标题下的描述 | \n
placeholder | \nString | \n\n | \n | 没有值时的提示文字 | \n
hide-district | \nBoolean | \nfalse | \n\n | 是否隐藏区,即只显示省份和城市 | \n
value-text-align | \nString | \nright | \n\n | value 对齐方式(text-align), v2.1.0-rc.49 开始支持 | \n
popup-style | \nObject | \n\n | v2.5.2 | \n弹窗样式,可以用于强制指定 z-index | \n
show | \nBoolean | \n\n | v2.5.8 | \n显示 (支持.sync修饰 next) | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \ntitle 插槽,可以使用它来添加 icon 等自定义样式,受控于 group 需要从 scope 里继承 class 和 样式 | \nv2.3.8 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-hide | \n\n | 关闭后触发,当非确定时,参数为false,反之为true | \n\n |
on-show | \n\n | 显示时触发 | \n\n |
on-shadow-change | \n(Array ids, Array names) | \npicker 值变化时触发,即滑动 picker 时触发 | \nv2.5.6 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XButton } from 'vux'\n
\n\n 按照`Vue`[文档](https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件),在组件上绑定点击事件请使用`@click.native`。\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
type | \nString | \ndefault | \n\n | 按钮类型,可选值为 default,primary,warn | \n
disabled | \nBoolean | \nfalse | \n\n | 是否不可点击 | \n
text | \nString | \n\n | \n | 按钮文字,同默认slot | \n
mini | \nBoolean | \nfalse | \n\n | 是否为mini类型,即小尺寸的按钮 | \n
plain | \nBoolean | \nfalse | \n\n | 是否是plain样式,没有背景色 | \n
action-type | \nString | \n\n | \n | button 的type属性,默认为浏览器默认(submit),可选为 submit button reset | \n
link | \nString | \n\n | v2.3.5 | \nvue-router 路由, 值为 BACK 等同于 go(-1) | \n
show-loading | \nBoolean | \nfalse | \n\n | 显示加载图标 | \n
gradients | \nArray | \n\n | v2.7.4 | \n按钮背景渐变,长度必须为2 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n按钮文字 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XInput } from 'vux'\n
\n <group>\n <x-input title=\"title\" v-model=\"value\"></x-input>\n </group>\n
\n`x-input`只能在`Group`中使用
\n如果你想实现在输入框右边按钮切换密码明文,请使用slot=right
实现type
切换。
\n
`mask` 在 `2.6.1` 支持,但注意的是使用 mask 后值也是经过 mask 处理后的值,进行判断或者提交到接口前应该注意。\n
\n比如格式化手机号码,`mask` 值为 `999 9999 9999`,得到的值将是 13 位的 `145 3456 3456`,提交或者判断都应该先清除中间空格。此时也不应该用 is-type=china-mobile 进行验证。\n
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 表单值,使用v-model 绑定 | \n
type | \nString | \ntext | \n\n | 即input的type 属性,目前支持 text ,number ,email ,password ,tel | \n
is-type | \nString Function | \n\n | \n | 内置验证器,支持email ,china-name ,china-mobile , 同样也支持直接传函数, 需要同步返回一个对象{valid:true} 或者{valid:false, msg:错误信息} | \n
required | \nBoolean | \nfalse | \n\n | 是否必值,如果不禁用验证,当没有填写时会在右侧显示错误icon | \n
title | \nString | \n\n | \n | label文字 | \n
placeholder | \nString | \n\n | \n | placeholder 提示 | \n
show-clear | \nBoolean | \ntrue | \n\n | 是否显示清除icon | \n
min | \nNumber | \n\n | \n | 最小输入字符限制 | \n
max | \nNumber | \n\n | \n | 最大输入字符限制,等同于maxlength ,达到限制到不能再输入 | \n
disabled | \nBoolean | \nfalse | \n\n | 是否禁用填写 | \n
readonly | \nBoolean | \nfalse | \n\n | 同input的标准属性readonly | \n
debounce | \nNumber | \n\n | \n | debounce 用以限制on-change 事件触发。如果你需要根据用户输入做ajax 请求,建议开启以节省无效请求和服务器资源,单位为毫秒 | \n
placeholder-align | \nString | \nleft | \nv2.1.1-rc.8 | \nplaceholder 文字对齐方式 | \n
text-align | \nString | \nleft | \n\n | 值对齐方式 | \n
label-width | \nString | \n\n | v2.2.1-rc.4 | \nlabel 宽度,权重比 group 的 labelWidth 高。不设定时将进行自动宽度计算,但超过15个字符时不会进行宽度设定。 | \n
mask | \nString | \n\n | v2.6.1 | \n(beta) 值格式化,依赖于 vanilla-masker,其中 9 表示数字,A 表示大写字母,S 表示数字或者字母 | \n
should-toast-error | \nString | \ntrue | \nv2.6.3 | \n是否在点击错误图标时用 toast 的形式显示错误 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
label | \n用于自定义label (即 title)部分内容,比如使用icon | \n\n |
restricted-label | \n用于自定义label 部分,和slot=label 不同的是,该slot宽度受到父组件group 的限制 | \n\n |
right | \n用以在输入框右边显示内容,比如单位,切换密码显示方式等 | \n\n |
right-full-height | \n用于放置和 cell 高度的验证码图片 | \nv2.8.1 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-blur | \n(value, $event) | \ninput的blur 事件 | \n\n |
on-focus | \n(value, $event) | \ninput的focus 事件 | \n\n |
on-enter | \n(value, $event) | \ninput输入完成后点击enter(确认) 事件 | \n\n |
on-change | \n(value) | \n输入值变化时触发。如果你使用了debounce ,那么触发将不会是实时的。 | \n\n |
on-click-error-icon | \n(error) | \n点击错误图标时触发,你可以关闭 should-toast-error 然后用这个事件来自定义显示错误的提示内容 | \nv2.6.3 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
focus | \n\n | 手动获得焦点 | \n\n |
blur | \n\n | 手动设置 input 失去焦点 | \n\n |
reset | \n(value = '') | \n重置输入框值,清除错误信息 | \nv2.1.1-rc.10 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XNumber } from 'vux'\n
\n <group>\n <x-number title=\"title\" v-model=\"value\"></x-number>\n </group>\n
\n`x-number`只能在`Group`中使用
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | 表单值,使用v-model 绑定 | \n
title | \nString | \n\n | \n | 标题 | \n
min | \nNumber | \n\n | \n | 最小值 | \n
max | \nNumber | \n\n | \n | 最大值 | \n
step | \nNumber | \n1 | \n\n | 步长 | \n
fillable | \nBoolean | \nfalse | \n\n | 是否可填写 | \n
width | \nString | \n50px | \n\n | 输入框宽度 | \n
button-style | \nString | \nsquare | \n\n | 按钮样式,可选值为square 或者round | \n
align | \nString | \nright | \n\n | 按钮部分位置,默认在右边(right),可选值为left 和right | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XSwitch } from 'vux'\n
\n <group>\n <x-switch title=\"title\" v-model=\"value\"></x-switch>\n </group>\n
\n`x-switch`只能在`Group`中使用
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | label文字 | \n
disabled | \nBoolean | \nfalse | \n\n | 是否不可点击 | \n
value | \nBoolean | \nfalse | \n\n | 表单值, 使用v-model 绑定 | \n
inline-desc | \nString | \n\n | \n | 标签下文字 | \n
prevent-default | \nBoolean | \nfalse | \nv2.5.0 | \n阻止点击时自动设定值 | \n
value-map | \nArray | \n[false, true] | \nv2.7.0 | \n用于自定义 false 和 true 映射的实际值,用于方便处理比如接口返回了 0 1 这类非 boolean 值的情况 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n值变化时触发,参数为 (currentValue) | \n\n |
on-click | \n(newVal, oldVal) | \n点击组件时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XTextarea } from 'vux'\n
\n <group>\n <x-textarea title=\"title\" v-model=\"value\"></x-textarea>\n </group>\n
\n`x-textarea`只能在`Group`中使用
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | v2.1.1-rc.8 | \nlabel文字 | \n
inline-desc | \nString | \n\n | v2.1.1-rc.8 | \n位于标题下的描述文字 | \n
show-counter | \nBoolean | \ntrue | \n\n | 是否显示计数 | \n
max | \nNumber | \n0 | \n\n | 最大长度限制 | \n
value | \nString | \n\n | \n | 表单值, 使用v-model 绑定 | \n
name | \nString | \n\n | \n | 表单名字 | \n
placeholder | \nString | \n\n | \n | 没有值时的提示文字 | \n
rows | \nNumber | \n3 | \n\n | textarea 标准属性 rows | \n
cols | \nNumber | \n30 | \n\n | textarea 标签属性 cols | \n
height | \nNumber | \n0 | \n\n | 高度 | \n
readonly | \nBoolean | \nfalse | \n\n | textarea 标签属性 readonly | \n
disabled | \nBoolean | \nfalse | \n\n | textarea 标签属性 disabled | \n
autosize | \nBoolean | \nfalse | \nv2.2.1-rc.6 | \n是否根据内容自动设置高度 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
label | \n用于自定义label (即 title)部分内容,比如使用icon | \nv2.1.1-rc.8 | \n
restricted-label | \n用于自定义label 部分,和slot=label 不同的是,该slot宽度受到父组件group 的限制 | \nv2.1.1-rc.8 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n表单值变化时触发 | \n\n |
on-focus | \n\n | focus 事件 | \nv2.1.1-rc.11 | \n
on-blur | \n\n | blur 事件 | \nv2.1.1-rc.11 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
updateAutosize | \n\n | 重置 autosize 高度,如果绑定值不为空,需要调用该函数进行高度重置 | \nv2.5.1 | \n