编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Actionsheet } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | 是否显示, 使用 v-model 绑定变量 | \n
show-cancel | \nBoolean | \nfalse | \n\n | 是否显示取消菜单,对安卓风格无效 | \n
cancel-text | \nString | \ncancel(取消) | \n\n | 取消菜单的显示文字 | \n
theme | \nString | \nios | \n\n | 菜单风格,可选值为[‘ios’,‘android’] | \n
menus | \nObject Array | \n{} | \n\n | 菜单项列表,举例:{menu1: '删除'} ,如果名字上带有.noop 表明这是纯文本(HTML)展示,不会触发事件,用于展示描述或者提醒。从 v2.1.0 开始支持数组类型的菜单,可自定义键值,见下面说明。 | \n
close-on-clicking-mask | \nBoolean | \ntrue | \nv2.0.0 | \n点击遮罩时是否关闭菜单,适用于一些进入页面时需要强制选择的场景。 | \n
close-on-clicking-menu | \nBoolean | \ntrue | \nv2.3.8 | \n点击菜单时是否自动隐藏 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-menu | \n(menuKey, menuItem) | \n点击菜单时触发 | \n\n |
on-click-menu-{menuKey} | \n(menuKey) | \n点击事件的快捷方式, menuKey 与label 的值有关。举例:如果你有一个菜单名字为delete , 那么你可以监听 on-click-menu-delete | \n\n |
on-click-menu-cancel | \n\n | 点击取消菜单时触发 | \n\n |
on-click-mask | \n\n | 点击遮罩时触发 | \nv2.3.4 | \n
从v2.1.0
开始支持数组类型的菜单。
label
: 菜单名字,支持文字及html
。
value
: 英文字符,表示触发事件的名字,如果不设置不会触发on-click-menu
事件。
type
: 类型,可选值如下
primary
主色warn
警告色disabled
不可操作,灰色。点击时不会关闭info
信息提示,点击时不会关闭。作用同对象类型的key.noop
。[{\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
\n编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Alert } from 'vux'\n
\n该组件支持以plugin
形式调用:
\n以插件形式调用时,和`template`中使用不同,属性名请使用`小驼峰式`,比如`buttonText`而不是`button-text`。\n
\n
\n在 `ViewBox` 或者 `overflow-scrolling:touch` 的容器中使用时,请使用 `prop:transfer-dom` 来解决其引起的 `z-index` 失效问题。详细参考 demo。\n
import { AlertPlugin } from 'vux'\nVue.use(AlertPlugin)\n\n// 或者umd方式\n// 引入构建的js文件\nVue.use(vuxAlertPlugin)\n
\n// 显示\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// 隐藏\nthis.$vux.alert.hide()\n
\n\n如果你想实现在`vue-router`的`beforeEach`或者`afterEach`的 hook 里关闭,可以使用 `Vue.$vux.alert.hide()`\n
\n\n该组件在 v2.7.2 以上支持单独调用,方法和插件使用一致。\n
\nimport { AlertModule } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | 是否显示, 使用 v-model 绑定变量 | \n
title | \nString | \n\n | \n | 弹窗标题 | \n
content | \nString | \n\n | v2.2.0 | \n提示内容,作为 slot:default 的默认内容,如果使用 slot:default, 将会失效 | \n
button-text | \nString | \nok(确定) | \n\n | 按钮文字 | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | 是否在点击遮罩时自动关闭弹窗 | \n
mask-transition | \nString | \nvux-fade | \n\n | 遮罩动画 | \n
dialog-transition | \nString | \nvux-dialog | \n\n | 弹窗主体动画 | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \n遮罩层 z-index 值 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n提示内容 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | 弹窗显示时触发 | \n\n |
on-hide | \n\n | 弹窗关闭时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Badge } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
text | \nString | \n\n | \n | 显示的文字 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Blur } from 'vux'\n
\nzh-CN:|
当前组件使用svg
实现模糊效果。如果在手机上渲染过慢,可以尝试直接使用css3的blur filter
。
This component uses svg
to implement blur. If rendering it in mobile devices is too slow, you can try to use a css3 featrue – blur filter
.
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
blur-amount | \nNumber | \n10 | \n\n | 模糊程度 | \n
url | \nString | \n\n | \n | 图片地址 | \n
height | \nNumber | \n200 | \n\n | 容器高度 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n容器内容,显示在模糊内容上面 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { ButtonTab, ButtonTabItem } from 'vux'\n\n
\nButtonTab
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nNumber | \n0 | \n\n | 当前选中索引值,从0开始,使用 v-model 绑定 | \n
height | \nNumber | \n30 | \n\n | 高度值, 单位为像素 | \n
ButtonTabItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
selected | \nBoolean | \nfalse | \n\n | 是否选中 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-item-click | \n(index) | \n当前按钮点击时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Calendar } from 'vux'\n
\n <group>\n <calendar title=\"title\" v-model=\"value\"></calendar>\n </group>\n
\n`calendar`只能在`Group`中使用\n
\n 除了`title`和 `value`, 其他`props`和`inline-calendar`完全一致。\n
当绑定值为数组时,日历将为多选模式
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 表单值, v-model 绑定。当值为空时,为单选;当值为[]时,为多选;设置值为’TODAY’可快捷选取当前日期。placeholder 只有在值为空或[]时显示。 | \n
title | \nString | \n\n | \n | label文字 | \n
placeholder | \nString | \n\n | \n | 占位提示文字 | \n
show-popup-header | \nBoolean | \n\n | v2.6.0 | \n是否显示弹窗头部,当为多选时强制显示,单选时默认不显示 | \n
popup-header-title | \nString | \n\n | v2.6.0 | \n弹窗头部文字 | \n
display-format | \nFunction | \n\n | v2.6.4 | \n格式化显示值 | \n
readonly | \nString | \n\n | v2.7.2 | \n是否禁用弹窗选择 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-change | \n(value) | \n值改变时触发 | \n\n |
on-show | \n\n | 弹窗显示时触发 | \n\n |
on-hide | \n\n | 弹窗关闭时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Card } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header.title | \nString | \n\n | \n | 头部标题,不指定则不显示 | \n
footer.title | \nString | \n\n | \n | 底部标题,不指定则不显示 | \n
footer.link | \nString | \n\n | \n | 底部链接,普通url或者v-link参数 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
header | \n头部位置 | \n\n |
content | \n中间主体位置 | \n\n |
footer | \n底部位置 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-footer | \n\n | 点击底部时触发 | \n\n |
on-click-header | \n\n | 点击头部时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { CellBox } from 'vux'\n
\n <group>\n <cell-box is-link>\n <!-- anything -->\n </cell-box>\n </group>\n
\n与`cell`相比,`cell-box`更自由和灵活,只提供`is-link`和`link`属性,内容直接使用默认slot定义。
`cell-box`同样只能在`Group`中使用
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
is-link | \nBoolean | \nfalse | \n\n | 是否为链接,如果是,右侧将会出现指引点击的右箭头 | \n
link | \nString Object | \n\n | \n | 点击链接,可以为http(s)协议,也可以是 vue-router 支持的地址形式 | \n
border-intent | \nBoolean | \ntrue | \nv2.2.1-rc.1 | \n是否显示边框与左边的间隙 | \n
align-items | \nString | \ncenter | \nv2.6.5 | \nflex 布局 align-items 设置 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n内容区域 | \n\n |
编辑文档
\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 { CheckIcon } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \nv2.3.8 | \n是否选中,使用 :value.sync 双向绑定 | \n
type | \nString | \nunknown | \n\n | check icon 样式,可选值为[‘plain’] | \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 { Clocker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
time | \nString | \n\n | \n | 结束时间 | \n
format | \nString | \n%D 天 %H 小时 %M 分 %S 秒 | \n\n | 显示格式 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n若存在,则作为最终显示出来的格式模板 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-tick | \n\n | 时间计算时触发,但非精确每1s触发 | \n\n |
on-finish | \n\n | 时间结束时触发 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
This Component is Deprecated. 请参考源码直接使用cell+slot来实现
\nimport { ColorPicker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 表单值 | \n
colors | \nArray | \n\n | \n | 可选颜色列表 | \n
size | \nString | \nlarge | \n\n | 按钮大小,可选值 large, middle, small | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Confirm } from 'vux'\n
\n\n 建议参照例子使用 `v-transfer-dom` 将弹窗插入 `body` 节点下,避免组件非 body 子节点导致的各种问题。\n
\n该组件支持以plugin
形式调用:
\n以插件形式调用时,和`template`中使用不同,属性名请使用`小驼峰式`,比如`confirmText`而不是`confirm-text`。\n
\nimport { ConfirmPlugin } from 'vux'\nVue.use(ConfirmPlugin)\n
\n// 显示\nconst _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向\nthis.$vux.confirm.show({\n // 组件除show外的属性\n onCancel () {\n console.log(this) // 非当前 vm\n console.log(_this) // 当前 vm\n },\n onConfirm () {}\n})\n// 隐藏\nthis.$vux.confirm.hide()\n// prompt形式调用\nthis.$vux.confirm.prompt('placeholder', {\n onCancel () {}\n onConfirm () {}\n})\n// 设置输入值\nthis.$vux.confirm.setInputValue('value') // 注意需要在 onShow 事件中执行\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | 是否显示,使用v-model 绑定 | \n
show-input | \nBoolean | \nfalse | \nv2.5.0 | \n是否显示输入框,如果为true,slot会失效 | \n
placeholder | \nString | \n\n | v2.5.0 | \n输入框的提示(仅在showInput为true的情况下有效) | \n
theme | \nString | \nios | \n\n | 弹窗风格,可以是ios或android | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | 是否在点击遮罩时自动关闭弹窗 | \n
title | \nString | \n\n | \n | 弹窗标题 | \n
content | \nString | \n\n | \n | 弹窗内容,作为slot默认内容,可以是html片段,如果使用slot该字段会失效 | \n
confirm-text | \nString | \n确认(confirm) | \n\n | 确认按钮的显示文字 | \n
cancel-text | \nString | \n取消(cancel) | \n\n | 取消按钮的显示文字 | \n
mask-transition | \nString | \nvux-fade | \n\n | 遮罩动画 | \n
dialog-transition | \nString | \nvux-dialog | \n\n | 弹窗动画 | \n
close-on-confirm | \nBoolean | \ntrue | \nv2.5.0 | \n是否在点击确认按钮时自动关闭 | \n
input-attrs | \nObject | \n\n | v2.5.7 | \ninput 属性 | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \n遮罩层 z-index 值 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n弹窗主体内容 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-cancel | \n\n | 点击取消按钮时触发 | \n\n |
on-confirm | \n(value) | \n点击确定按钮时触发, 参数为prompt中输入的值 | \n\n |
on-show | \n\n | 弹窗出现时触发 | \n\n |
on-hide | \n\n | 弹窗隐藏时触发 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
v2.6.4 | \n\n | [feature] 支持属性 mask-z-index 设置遮罩 z-index | \n\n |
setInputValue | \n(value) | \n设置输入值,当 show-input 为 true 时有效 | \nv2.5.5 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
This Component is Deprecated.
\nimport { Countdown } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nnumber | \n\n | \n | 时间,秒为单位 | \n
start | \nBoolean | \ntrue | \n\n | 是否开始计数 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Countup } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
start-val | \nNumber | \n0 | \n\n | 开始数字 | \n
end-val | \nNumber | \n\n | \n | 结束数字 | \n
decimals | \nNumber | \n0 | \n\n | 小数点位数 | \n
duration | \nNumber | \n2 | \n\n | 耗时(秒) | \n
options | \nObject | \n\n | \n | countup.js 的设置项 | \n
start | \nBoolean | \ntrue | \n\n | 是否自动开始计数 | \n
tag | \nString | \nspan | \nv2.5.5 | \n渲染标签 | \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 { DatetimeView } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nString | \n\n | \n | 表单值,v-model 绑定 | \n
format | \nString | \nYYYY-MM-DD | \n\n | 日期栏的显示格式 | \n
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
render | \n\n | 强制重新渲染组件,当主动修改值或者其他非响应属性时需要调用该方法 | \nv2.5.0 | \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 { Divider } from 'vux'\n
\n\n不支持配置分割线颜色,因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色,请使用`load-more`组件。\n
\n<divider>我是有底线的</divider>\n
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n分隔线标题 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Drawer } from 'vux'\n
\n当前组件 forked 自 https://github.com/bajian/vue-drawer
\n\n 因为 router-view 组件需要包含在 drawer 组件里,因此源码请参考 App.vue https://github.com/airyland/vux/blob/v2/src/App.vue\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \nv2.4.0 | \n是否展开,使用 :show.sync 绑定(vue@^2.3.3) | \n
drawer-style | \nString | \n\n | v2.4.0 | \n菜单样式 | \n
show-mode | \nString | \noverlay | \nv2.4.0 | \n展示方式,push(推开内容区域)或者 overlay(在内容上显示) | \n
placement | \nString | \nleft | \nv2.4.0 | \n显示位置,可以为 left 或者 right | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n主体内容插槽 | \nv2.4.0 | \n
drawer | \n侧边栏内容插槽 | \nv2.4.0 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Flexbox } from 'vux'\n
\nFlexbox
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
gutter | \nNumber | \n8 | \n\n | 间隙像素大小(px) | \n
orient | \nString | \nhorizontal | \n\n | 排布方向,可选[‘horizontal’, ‘vertical’] | \n
justify | \nString | \n\n | \n | flex 的justify-content 属性 | \n
align | \nString | \n\n | \n | flex 的align-items 属性 | \n
wrap | \nString | \n\n | \n | flex 的flex-wrap 属性 | \n
direction | \nString | \n\n | \n | flex 的flex-direction 属性 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nflexbox-item 的内容插槽 | \n\n |
FlexboxItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
span | \nNumber | \n\n | \n | 占用宽度,如果不设置,所有flexbox-item将平分 | \n
order | \nString | \n\n | \n | flex 的order 属性 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n内容插槽 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Flow } from 'vux'\n
\nFlow
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
orientation | \nString | \nhorizontal | \n\n | flow 方向,可选[‘horizontal’, ‘vertical’] | \n
FlowState
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | 标题 | \n
state | \nString Number | \n\n | \n | 在节点中显示的内容 | \n
is-done | \nBoolean | \nfalse | \n\n | 该节点是否完成 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
title | \n标题插槽,默认内容为 prop:title | \nv2.7.0 | \n
FlowLine
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
tip | \nString | \n\n | \n | 流线的提示文字,当 is-done 为 true 时无效 | \n
tip-direction | \nString | \ntop for horizontal flow, left for vertical flow | \n\n | 提示文字方向,可选[‘top’, ‘right’, ‘bottom’, ‘left’]. 在横向 flow 中默认为 top,纵向默认则为 left | \n
is-done | \nBoolean | \nfalse | \n\n | 该流线是否完成 | \n
line-span | \nNumber String | \n\n | \n | 流线的整体长度,如果不设置,所有 flow line 将平分 | \n
process-span | \nNumber String | \n50 | \n\n | 在 flow line 上显示的进度比例 | \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 { Grid, GridItem } from 'vux'\n
\n<grid>\n <grid-item label=\"Grid\" v-for=\"i in 9\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n</grid>\n
\nGrid
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
rows | \nNumber | \n3 | \nv2.2.0 | \n(v2.6.0 之后废弃,使用 col 替代)宫格行数,建议少于5 | \n
cols | \nNumber | \n3 | \nv2.6.1 | \n列数。如果为非单行 Grid,需要设置 cols,否则所有 GridItem 会平均宽度显示在一行。 | \n
show-lr-borders | \nBoolean | \ntrue | \nv2.8.1 | \n是否显示左右边框 | \n
show-vertical-dividers | \nBoolean | \ntrue | \nv2.8.1 | \n是否显示垂直分割线 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n用于grid-item 的插槽 | \n\n |
GridItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
icon | \nString | \n\n | \n | 图标地址,如果是线上地址,推荐使用该prop。如果是本地图标资源,使用slot=icon 可以保证资源被正确打包 | \n
label | \nString | \n\n | \n | label 文字 | \n
link | \nString | \n\n | \n | vue-router 路径 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
icon | \n图标内容,直接使用<img> 标签 | \n\n |
label | \nlabel 文字的 slot,作用同 prop:label | \n\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 { Icon } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
type | \nString | \n\n | \n | 图标名字,可选值见demo | \n
is-msg | \nBoolean | \nfalse | \n\n | 是否用作消息提示页面图标,图标尺寸会使用93px | \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
\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 { InlineLoading } from 'vux'\n
\n版本要求 vux@^2.3.4
\n编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { InlineXNumber } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
width | \nString | \n50px | \n\n | 数字所占据的宽度 | \n
button-style | \nString | \nsquare | \n\n | 按钮样式,可选[‘round’] | \n
min | \nNumber | \n\n | \n | 最小值 | \n
max | \nnumber | \n\n | \n | 最大值 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { LoadMore } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show-loading | \nBoolean | \ntrue | \n\n | 是否显示 loading 图标 | \n
tip | \nString | \n\n | \n | 提示文字,如果没有显示图标也没有显示文字,则显示点 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Loading } from 'vux'\n
\n该组件支持以plugin
形式调用:
import { LoadingPlugin } from 'vux'\nVue.use(LoadingPlugin)\n\n// 或者umd方式\n// 引入构建的js文件\nVue.use(vuxLoadingPlugin)\n
\n// 显示\nthis.$vux.loading.show({\n text: 'Loading'\n})\n// 隐藏\nthis.$vux.loading.hide()\n
\n\nloading同样支持在vue外直接使用,请参照 [https://github.com/airyland/vux/blob/v2/docs/examples/loading.html](https://github.com/airyland/vux/blob/v2/docs/examples/loading.html)\n
\n\n从v2.7.8版本开始以组件形式调用增加`delay`参数,从而实现延时显示.\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | 显示状态,在 v2.5.7 前使用v-model 绑定,后面直接使用 :show 绑定 | \n
text | \nString | \n\n | \n | 提示文字 | \n
position | \nString | \nfixed | \n\n | 定位方式,默认为fixed ,在100%的布局下用absolute 可以避免抖动 | \n
transition | \nString | \nvux-mask | \n\n | 显示动画名字 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n提示文字区域 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Marquee, MarqueeItem } from 'vux'\n
\nMarquee
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
interval | \nNumber | \n2000 | \n\n | 切换时间间隙 | \n
duration | \nNumber | \n300 | \n\n | 切换动画时间 | \n
direction | \nString | \nup | \n\n | 切换方向,可选[‘up’, ‘down’] | \n
item-height | \nNumber | \n\n | \n | 条目高度,当默认状态为隐藏时你需要设置值,否则组件渲染时会获取不到正确高度 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n内容插槽 | \n\n |
MarqueeItem
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n内容插槽 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Masker } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
color | \nString | \n0, 0, 0 | \n\n | 遮罩颜色,rgb值,‘0, 0, 0’ | \n
opacity | \nNumber | \n0.5 | \n\n | 遮罩透明度 | \n
fullscreen | \nBoolean | \nfalse | \nv2.1.1-rc.14 | \n遮罩是否全屏 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n背景内容,位于遮罩下方,一般为图片 | \n\n |
content | \n遮罩上方内容,一般显示标题消息 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Msg } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
title | \nString | \n\n | \n | 操作状态提示文字 | \n
description | \nString | \n\n | \n | 描述文字 | \n
icon | \nString | \nsuccess | \n\n | 图标类型,可选值有 success , warn , info , waiting | \n
buttons | \nArray | \n\n | \n | 操作按钮列表,一个按钮对象包含text , type (和x-button组件type一致), link , onClick | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
buttons | \n自定义按钮区域元素 | \n\n |
description | \n自定义描述文字内容 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Panel } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
header | \nString | \n\n | \n | 头部文字 | \n
footer | \nObject | \n\n | \n | 尾部配置,{url: url, title: title} | \n
list | \nArray | \n\n | \n | 内容列表,[{title, desc, src, fallbackSrc, meta:{source,date,other |