编辑文档
\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 { 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源码
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 { Popup } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \n\n | \n | 是否关闭,使用v-model 绑定 | \n
height | \nString | \nauto | \n\n | 高度,设置100% 为整屏高度。当 position 为 top 或者 bottom 时有效。 | \n
hide-on-blur | \nBoolean | \ntrue | \n\n | 点击遮罩时是否自动关闭 | \n
is-transparent | \nBoolean | \nfalse | \nv2.1.1-rc.9 | \n是否为透明背景 | \n
width | \nString | \nauto | \nv2.2.1-rc.6 | \n设置 100% 宽度必须使用该属性。在 position 为 left 或者 right 时有效。 | \n
position | \nString | \nbottom | \nv2.2.1-rc.6 | \n位置,可取值 [‘left’, ‘right’, ‘top’, ‘bottom’] | \n
show-mask | \nBoolean | \ntrue | \nv2.2.1-rc.6 | \n是否显示遮罩 | \n
popup-style | \nObject | \n\n | v2.5.2 | \n弹窗样式,可以用于强制指定 z-index | \n
hide-on-deactivated | \nBoolean | \ntrue | \nv2.5.5 | \n是否在 deactived 事件触发时自动关闭,避免在路由切换时依然显示弹窗 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n弹窗主体内容 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-hide | \n\n | 关闭时触发 | \n\n |
on-show | \n\n | 显示时触发 | \n\n |
on-first-show | \n\n | 第一次显示时触发,可以在该事件回调里初始化数据或者界面 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Toast } from 'vux'\n
\n该组件支持以plugin
形式调用:
\n 以插件形式调用时,和`template`中使用不同,属性名请使用`小驼峰式`,比如`isShowMask`而不是`is-show-mask`。\n
\nimport { ToastPlugin } from 'vux'\nVue.use(ToastPlugin)\n\n// 或者umd方式\n// 引入构建的js文件\nVue.use(vuxToastPlugin)\n\n// 默认参数\nVue.use(ToastPlugin, {position: 'top'})\n
\n// 显示\nthis.$vux.toast.show({\n text: 'Loading'\n})\n\n// 显示文字\nthis.$vux.toast.text('hello', 'top')\n\n// 隐藏\nthis.$vux.toast.hide()\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | 是否显示, 使用 v-model 绑定 | \n
time | \nNumber | \n2000 | \n\n | 显示时间 | \n
type | \nString | \nsuccess | \n\n | 类型,可选值 success, warn, cancel, text | \n
width | \nString | \n7.6em | \n\n | 宽度 | \n
is-show-mask | \nBoolean | \nfalse | \n\n | 是否显示遮罩,如果显示,用户将不能点击页面上其他元素 | \n
text | \nString | \n\n | \n | 提示内容,支持 html,和默认slot同样功能 | \n
position | \nString | \ndefault | \nv2.1.1-rc.4 | \n显示位置,可选值 default, top, middle, bottom | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n默认slot, 提示内容 | \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 { XDialog } from 'vux'\n
\n\n如果当前组件所在位置某一父级使用了 `ViewBox` 组件或者直接使用了 Safari 的 `overflowScrolling:touch`,请引入指令 `transfer-dom` 以解决其带来的 `z-index` 失效问题。\n
\n
\n如果你没有使用,那么不需要参照 demo 加上`v-transfer-dom`\n
import { TransferDomDirective as TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n }\n}\n
\n<div v-transfer-dom>\n <x-dialog></x-dialog>\n</div>\n
\n\n`scroll` 属性已经在 v2.5.12 废弃,因为它并没有实现阻止 body 滚动。\n
\n如果你是 `100%` 布局,按照下面配置布局可以实现阻止滚动。\n
import { ConfigPlugin } from 'vux'\n\nVue.use(ConfigPlugin, {\n $layout: 'VIEW_BOX'\n})\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | 弹窗是否可见,使用 v-model 绑定,在 v2.5.3 之后版本支持.sync修饰符 | \n
mask-transition | \nString | \nvux-mask | \n\n | 遮罩层动画 | \n
dialog-transition | \nString | \nvux-dialog | \n\n | 弹窗动画 | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | 是否在点击遮罩时自动关闭弹窗 | \n
scroll | \nBoolean | \ntrue | \n\n | 【废弃】是否在弹窗上滚动时 body 内容也滚动 | \n
dialog-style | \nObject | \n\n | v2.2.2 | \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 |