Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Actionsheet } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | if showing the component; use v-model for binding | \n
show-cancel | \nBoolean | \nfalse | \n\n | if showing the cancel menu; invalid for android theme | \n
cancel-text | \nString | \ncancel(取消) | \n\n | text of cancel menu | \n
theme | \nString | \nios | \n\n | theme of menus, can be in [‘ios’, ‘android’] | \n
menus | \nObject Array | \n{} | \n\n | menu items, for example: {menu1: 'some text'} , menu name with .noop will not trigger click events. Menus supports array since v2.1.0 . Keys can be customized. More details below. | \n
close-on-clicking-mask | \nBoolean | \ntrue | \nv2.0.0 | \nif closing actionsheet when clicking on mask | \n
close-on-clicking-menu | \nBoolean | \ntrue | \nv2.3.8 | \nif hide automatically when clicking on menus | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-menu | \n(menuKey, menuItem) | \ntriggers when clicking on the menu | \n\n |
on-click-menu-{menuKey} | \n(menuKey) | \nshortcut event for easier listening, menuKey is related to label . For exapmple, you can listen on on-click-menu-delete if you have a menu named delete | \n\n |
on-click-menu-cancel | \n\n | triggers when clicking on the cancel menu | \n\n |
on-click-mask | \n\n | triggers when clicking on mask | \nv2.3.4 | \n
From v2.1.0
, menus
supports type: Array.
label
: label name,you can use simple text or html
value
: event name,if not specified, no on-click-menu
will be emitted
type
:
primary
primary colorwarn
warn colordisabled
gray color, the menu cannot be clickedinfo
the menu item shows as a tip, the same function as key.noop
when setting menus by Object
.[{\n label: 'Are you sure?<br/><span style=\"color:#666;font-size:12px;\">Once deleted, you will never find it.</span>',\n type: 'info'\n}, {\n label: 'Primary',\n type: 'primary',\n value: 'primary'\n}, {\n label: 'Warn',\n type: 'warn'\n}, {\n label: 'Disabled',\n type: 'disabled'\n}, {\n label: 'Default'\n}]\n
\nEdit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Alert } from 'vux'\n
\nThis component can be imported as plugin:
\n\nWhen importing it as plugin, the usage is different from it in `template`. Please use `little camel-case` such as `buttonText` instead of `button-text`.\n
\nimport { AlertPlugin } from 'vux'\nVue.use(AlertPlugin)\n\n// or the way of umd\n// import built js file\nVue.use(vuxAlertPlugin)\n
\n// show\nthis.$vux.alert.show({\n title: 'Vux is Cool',\n content: 'Do you agree?',\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding')\n }\n})\n// hide\nthis.$vux.alert.hide()\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | visibility of the component, use v-model for binding | \n
title | \nString | \n\n | \n | title | \n
content | \nString | \n\n | v2.2.0 | \nalert content, and will be replaced if using slot:default | \n
button-text | \nString | \nok(确定) | \n\n | button text | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | if closing dialog when clicking on mask | \n
mask-transition | \nString | \nvux-fade | \n\n | mask transition | \n
dialog-transition | \nString | \nvux-dialog | \n\n | dialog transition | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \nzIndex of mask | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ndialog content | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | emits when dialog shows | \n\n |
on-hide | \n\n | emits when dialog is closed | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Confirm } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | visibility of the component | \n
show-input | \nBoolean | \nfalse | \nv2.5.0 | \nwhether show input or not. If true, slot will not work | \n
placeholder | \nString | \n\n | v2.5.0 | \nplaceholder of prompt, valid when show-input is true | \n
theme | \nString | \nios | \n\n | dialog’s style, can be ios or android | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | if closing dialog when clicking on mask | \n
title | \nString | \n\n | \n | dialog title | \n
content | \nString | \n\n | \n | dialog content, can use html. Invalid when using slot | \n
confirm-text | \nString | \n确认(confirm) | \n\n | text of confirm button | \n
cancel-text | \nString | \n取消(cancel) | \n\n | text of cancel button | \n
mask-transition | \nString | \nvux-fade | \n\n | mask’s transition | \n
dialog-transition | \nString | \nvux-dialog | \n\n | dialog’s transition | \n
close-on-confirm | \nBoolean | \ntrue | \nv2.5.0 | \nwhether close automatically when confirm button is clicked | \n
input-attrs | \nObject | \n\n | v2.5.7 | \ninput attributes | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \nzIndex of mask | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nbody content of the dialog | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-cancel | \n\n | triggers when the cancel button is clicked | \n\n |
on-confirm | \n(value) | \ntriggers when the confirm button is clicked | \n\n |
on-show | \n\n | triggers when the dialog shows | \n\n |
on-hide | \n\n | triggers when the dialog hides | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
v2.6.4 | \n\n | [feature] support prop:mask-z-index | \n\n |
setInputValue | \n(value) | \nset input value when show-input is true | \nv2.5.5 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Loading } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | visibility of the component. Use v-model for binding before v2.5.7, otherwise use :show | \n
text | \nString | \n\n | \n | loading text | \n
position | \nString | \nfixed | \n\n | position, default is fixed , you can use absolute | \n
transition | \nString | \nvux-mask | \n\n | transition name | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent area | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Popup } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \n\n | \n | visibility of popup, use v-model for binding | \n
height | \nString | \nauto | \n\n | popup height, works when position is top or bottom | \n
hide-on-blur | \nBoolean | \ntrue | \n\n | if closing popup when mask being clicked | \n
is-transparent | \nBoolean | \nfalse | \nv2.1.1-rc.9 | \nif using transparent background | \n
width | \nString | \nauto | \nv2.2.1-rc.6 | \nif you want to set 100% width, you should use this prop. only works when position is left or right | \n
position | \nString | \nbottom | \nv2.2.1-rc.6 | \npopup position, shoule be one of [‘left’, ‘right’, ‘top’, ‘bottom’] | \n
show-mask | \nBoolean | \ntrue | \nv2.2.1-rc.6 | \nwhether show mask | \n
popup-style | \nObject | \n\n | v2.5.2 | \npopup style | \n
hide-on-deactivated | \nBoolean | \ntrue | \nv2.5.5 | \nwhether hide popup on deactived event when using keep-alive | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent body | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-hide | \n\n | emits when then popup is closed | \n\n |
on-show | \n\n | emits when the popup shows | \n\n |
on-first-show | \n\n | emits at the first time the popup shows | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Toast } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nBoolean | \nfalse | \n\n | if showing toast, use v-model for binding | \n
time | \nNumber | \n2000 | \n\n | show time | \n
type | \nString | \nsuccess | \n\n | toast type, success, warn, cancel, text | \n
width | \nString | \n7.6em | \n\n | toast’s width | \n
is-show-mask | \nBoolean | \nfalse | \n\n | if showing mask, users cannot operate other elements on the page | \n
text | \nString | \n\n | \n | content of the toast, text or html, the same function as default slot | \n
position | \nString | \ndefault | \nv2.1.1-rc.4 | \ntoast position, available values: default, top, middle, bottom | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ndefault slot, the content of the toast | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | emits when toast shows | \n\n |
on-hide | \n\n | emits when toast hides | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XDialog } from 'vux'\n
\n\nif you use `XDialog` inside `ViewBox` or use `overflowScrolling:touch`,please should import `directive:transfer-dom` to fix `z-index` invalid issue。\n
\n
\notherwise, you don't need to use `v-transfer-dom`.\n
import { TransferDomDirective as TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n }\n}\n\n
\n<div v-transfer-dom>\n <x-dialog></x-dialog>\n</div>\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
show | \nBoolean | \nfalse | \n\n | visibility of the dialog, supports the .sync modifier | \n
mask-transition | \nString | \nvux-mask | \n\n | transition of mask | \n
dialog-transition | \nString | \nvux-dialog | \n\n | transition of dialog body | \n
hide-on-blur | \nBoolean | \nfalse | \n\n | if closing dialog when clicking on mask | \n
scroll | \nBoolean | \ntrue | \n\n | [deprecated]if body content can scroll when scrolling on dialog | \n
dialog-style | \nObject | \n\n | v2.2.2 | \nset dialog styles, you can use it for overwritting default width and background style | \n
mask-z-index | \nNumber String | \n1000 | \nv2.6.4 | \nzIndex of mask | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nmain content of the dialog | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-show | \n\n | emits when opening dialog | \n\n |
on-hide | \n\n | emits when closing dialog | \n\n |