---
nav: en
---
## dialog
---
### Actionsheet
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Actionsheet } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | if showing the component; use v-model for binding |
| show-cancel | Boolean | false | | if showing the cancel menu; invalid for android theme |
| cancel-text | String | cancel(取消) | | text of cancel menu |
| theme | String | ios | | theme of menus, can be in ['ios', 'android'] |
| menus | Object
Array | {} | | 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. |
| close-on-clicking-mask | Boolean | true | | if closing actionsheet when clicking on mask |
| close-on-clicking-menu | Boolean | true | | if hide automatically when clicking on menus |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-click-menu | (menuKey, menuItem) | triggers when clicking on the menu | |
| on-click-menu-{menuKey} | (menuKey) | shortcut 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` | |
| on-click-menu-cancel | | triggers when clicking on the cancel menu | |
| on-click-mask | | triggers when clicking on mask | |
Demo page
`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 color
- `warn` warn color
- `disabled` gray color, the menu cannot be clicked
- `info ` the menu item shows as a tip, the same function as `key.noop` when setting menus by `Object`.
``` js
[{
label: 'Are you sure?
Once deleted, you will never find it.',
type: 'info'
}, {
label: 'Primary',
type: 'primary',
value: 'primary'
}, {
label: 'Warn',
type: 'warn'
}, {
label: 'Disabled',
type: 'disabled'
}, {
label: 'Default'
}]
```
---
### Loading
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Loading } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| show | Boolean | false | | visibility of the component. Use `v-model` for binding before v2.5.7, otherwise use `:show` |
| text | String | | | loading text |
| position | String | fixed | | position, default is `fixed`, you can use `absolute` |
| transition | String | vux-mask | | transition name |
Slots
|name|description|version|
|-------|-------|-------|
| default | content area | |
Demo page
---
### Popup
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Popup } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | | | visibility of popup, use `v-model` for binding |
| height | String | auto | | popup height, works when position is top or bottom |
| hide-on-blur | Boolean | true | | if closing popup when mask being clicked |
Slots
|name|description|version|
|-------|-------|-------|
| default | content body | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-hide | | emits when then popup is closed | |
| on-show | | emits when the popup shows | |
| on-first-show | | emits at the first time the popup shows | |
Demo page
---
### Toast
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { Toast } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | if showing toast, use v-model for binding |
| time | Number | 2000 | | show time |
| type | String | success | | toast type, success, warn, cancel, text |
| width | String | 7.6em | | toast's width |
| is-show-mask | Boolean | false | | if showing mask, users cannot operate other elements on the page |
| text | String | | | content of the toast, text or html, the same function as default slot |
Slots
|name|description|version|
|-------|-------|-------|
| default | default slot, the content of the toast | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when toast shows | |
| on-hide | | emits when toast hides | |
Demo page
---
### XAlert
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XAlert } from 'cvux'
```
Show some information that user should pay attention to and should be closed only after user has clicked the close button
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| value | Boolean | false | | visibility of the component, use v-model for binding |
| title | String | | | title |
| button-text | String | ok(确定) | | button text |
| mask-transition | String | vux-fade | | mask transition |
| dialog-transition | String | vux-dialog | | dialog transition |
| content | string | null | 1.3.4 | undefined |
| autoCloseTime | Number | 0 | 1.3.4 | undefined |
Slots
|name|description|version|
|-------|-------|-------|
| default | dialog content | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when dialog shows | |
| on-hide | | emits when dialog is closed | |
Demo page
---
### XDialog
Edit document
Demo page
demo 原始链接
Demo source
``` js
import { XDialog } from 'cvux'
```
Props
|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| show | Boolean | false | | visibility of the dialog, supports the .sync modifier |
| mask-transition | String | vux-mask | | transition of mask |
| dialog-transition | String | vux-dialog | | transition of dialog body |
| hide-on-blur | Boolean | false | | if closing dialog when clicking on mask |
| scroll | Boolean | true | | [deprecated]if body content can scroll when scrolling on dialog |
Slots
|name|description|version|
|-------|-------|-------|
| default | main content of the dialog | |
Events
|name|params|description|version|
|-------|-------|-------|-------|
| on-show | | emits when opening dialog | |
| on-hide | | emits when closing dialog | |
Demo page