| VUX - Vue 移动端 UI 组件库

dialog

Actionsheet_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Actionsheet } from 'vux'

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	v2.0.0	if closing actionsheet when clicking on mask
close-on-clicking-menu	Boolean	true	v2.3.8	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	v2.3.4

Demo page

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 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.

[{
  label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
  type: 'info'
}, {
  label: 'Primary',
  type: 'primary',
  value: 'primary'
}, {
  label: 'Warn',
  type: 'warn'
}, {
  label: 'Disabled',
  type: 'disabled'
}, {
  label: 'Default'
}]

Alert_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Alert } from 'vux'

This component can be imported as plugin:

When importing it as plugin, the usage is different from it in `template`. Please use `little camel-case` such as `buttonText` instead of `button-text`.

import  { AlertPlugin } from 'vux'
Vue.use(AlertPlugin)

// or the way of umd
// import built js file
Vue.use(vuxAlertPlugin)

// show
this.$vux.alert.show({
  title: 'Vux is Cool',
  content: 'Do you agree?',
  onShow () {
    console.log('Plugin: I\'m showing')
  },
  onHide () {
    console.log('Plugin: I\'m hiding')
  }
})
// hide
this.$vux.alert.hide()

Props

name	type	default	version	description
value	Boolean	false		visibility of the component, use v-model for binding
title	String			title
content	String		v2.2.0	alert content, and will be replaced if using slot:default
button-text	String	ok(确定)		button text
hide-on-blur	Boolean	false		if closing dialog when clicking on mask
mask-transition	String	vux-fade		mask transition
dialog-transition	String	vux-dialog		dialog transition
mask-z-index	Number String	1000	v2.6.4	zIndex of mask

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

Confirm_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Confirm } from 'vux'

Props

name	type	default	version	description
show	Boolean	false		visibility of the component
show-input	Boolean	false	v2.5.0	whether show input or not. If true, slot will not work
placeholder	String		v2.5.0	placeholder of prompt, valid when show-input is true
theme	String	ios		dialog’s style, can be ios or android
hide-on-blur	Boolean	false		if closing dialog when clicking on mask
title	String			dialog title
content	String			dialog content, can use html. Invalid when using slot
confirm-text	String	确认(confirm)		text of confirm button
cancel-text	String	取消(cancel)		text of cancel button
mask-transition	String	vux-fade		mask’s transition
dialog-transition	String	vux-dialog		dialog’s transition
close-on-confirm	Boolean	true	v2.5.0	whether close automatically when confirm button is clicked
input-attrs	Object		v2.5.7	input attributes
mask-z-index	Number String	1000	v2.6.4	zIndex of mask

Slots

name	description	version
default	body content of the dialog

Events

name	params	description
on-cancel		triggers when the cancel button is clicked
on-confirm	(value)	triggers when the confirm button is clicked
on-show		triggers when the dialog shows
on-hide		triggers when the dialog hides

Methods

name	params	description	version
v2.6.4		[feature] support prop:mask-z-index
setInputValue	(value)	set input value when show-input is true	v2.5.5

Demo page

Loading_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Loading } from 'vux'

Props

name	type	default	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_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Popup } from 'vux'

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
is-transparent	Boolean	false	v2.1.1-rc.9	if using transparent background
width	String	auto	v2.2.1-rc.6	if you want to set 100% width, you should use this prop. only works when position is left or right
position	String	bottom	v2.2.1-rc.6	popup position, shoule be one of [‘left’, ‘right’, ‘top’, ‘bottom’]
show-mask	Boolean	true	v2.2.1-rc.6	whether show mask
popup-style	Object		v2.5.2	popup style
hide-on-deactivated	Boolean	true	v2.5.5	whether hide popup on deactived event when using keep-alive

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_COM

Edit document
Demo page
demo 原始链接
Demo source

import { Toast } from 'vux'

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
position	String	default	v2.1.1-rc.4	toast position, available values: default, top, middle, bottom

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

XDialog_COM

Edit document
Demo page
demo 原始链接
Demo source

import { XDialog } from 'vux'

if you use `XDialog` inside `ViewBox` or use `overflowScrolling:touch`，please should import `directive:transfer-dom` to fix `z-index` invalid issue。

otherwise, you don't need to use `v-transfer-dom`.

import { TransferDomDirective as TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  }
}

<div v-transfer-dom>
  <x-dialog></x-dialog>
</div>

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
dialog-style	Object		v2.2.2	set dialog styles, you can use it for overwritting default width and background style
mask-z-index	Number String	1000	v2.6.4	zIndex of mask

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