MessageBox
A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
By design MessageBox provides simulations of browsers' alert
, confirm
and prompt
. Use Modal instead if needed more complicated contents.
Alert
Displays an alert modal with the optional specified content and an OK (auto-focused) button. By default it can not be closed on backdrop click.
An alert example using callback:
<template>
<Btn type="primary" @click="alert">Click to open an alert modal</Btn>
</template>
<script setup>
import { Btn, MessageBox, Notification } from 'uiv';
function alert() {
MessageBox.alert(
{
title: 'Title',
content: 'This is an alert message.',
},
(msg) => {
// callback after modal dismissed
Notification.notify(`You selected ${msg}.`);
}
);
}
</script>
Confirm
Displays a modal dialog with an optional message and two buttons, OK (auto-focused) and Cancel.
A confirm example using Promise
:
<template>
<Btn type="primary" @click="confirm">Click to open a confirm modal</Btn>
</template>
<script setup>
import { Btn, MessageBox, Notification } from 'uiv';
function confirm() {
MessageBox.confirm({
title: 'Confirm',
content: 'This item will be permanently deleted. Continue?',
})
.then(() => {
Notification.notify({
type: 'success',
content: 'Delete completed.',
});
})
.catch(() => {
Notification.notify('Delete canceled.');
});
}
</script>
Prompt
Displays a dialog with an optional message prompting the user to input some text.
<template>
<Btn type="primary" @click="confirm">Click to open a prompt modal</Btn>
</template>
<script setup>
import { Btn, MessageBox, Notification } from 'uiv';
function confirm() {
MessageBox.prompt({
title: 'Welcome',
content: 'Please input your email:',
// A simple input validator
// returns the err msg (not valid) or null (valid)
validator(value) {
return /\S+@\S+\.\S+/.test(value) ? null : 'Email address is not valid!';
},
})
.then((value) => {
Notification.notify({
type: 'success',
content: `You email address is ${value}`,
});
})
.catch(() => {
Notification.notify('Input canceled.');
});
}
</script>
Global methods
Following global methods for app.config.globalProperties
will be added if uiv is installed:
$alert(options, callback(msg))
$confirm(options, callback(err, msg))
$prompt(options, callback(err, msg))
Callback params:
err
as user dismiss or cancel the box, otherwise it will benull
. Note that there is no err in$alert
callback.msg
as the user input while using prompt.
Each of these methods will return a Promise
object that resolve / reject while the box is closed (if supported by browser or with es6 promise polyfill).
Import individually
If you prefer importing MessageBox
individually:
import { MessageBox } from 'uiv'
or:
import MessageBox from 'uiv/dist/MessageBox'
The corresponding methods are: MessageBox.alert
, MessageBox.confirm
and MessageBox.prompt
, with same parameters as above.
WARNING
You CAN NOT use MessageBox individually like this if you're also using vue-i18n
in the root instance of Vue (because it will not be able to access the correct language pack), a workaround is to register them manually:
import { MessageBox } from 'uiv'
app.config.globalProperties = MessageBox.alert
// ...
API Reference
MessageBox
These props are used as options
in the methods above.
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
size | String | sm | The alternative modal sizes. Support: lg / md / sm . | |
title | String | The modal title. | ||
content | String | The modal content. | ||
html | Boolean | false | Allow HTML in content. | |
okText | String | Text of ok button. | ||
okType | String | primary | Button type of ok button. | |
cancelText | String | Text of cancel button. | ||
cancelType | String | default | Button type of cancel button. | |
customClass | Custom classes to modal, anything that can work with v-bind:class or :class . | |||
backdrop | Boolean | false if type is alert, otherwise true | Dismiss the modal by backdrop click. | |
validator | Function | Custom validator function for prompt. Accepts the input value as param, returns the err msg (not valid) or null (valid) | ||
defaultValue | String | The default value to fill in prompt box. | ||
inputType | String | text | The default input type of prompt box. | |
autoFocus | String | ok | Focus on button while message box open. Can be ok / cancel , or empty String to disable the feature. | |
reverseButtons | Boolean | false | Reverse the order of ok and cancel button. |