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>
  <div class="uiv">
    <Btn type="primary" @click="alert">Click to open an alert modal</Btn>
  </div>
</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>
  <div class="uiv">
    <Btn type="primary" @click="confirm">Click to open a confirm modal</Btn>
  </div>
</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>
  <div class="uiv">
    <Btn type="primary" @click="confirm">Click to open a prompt modal</Btn>
  </div>
</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 be null. 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

NameTypeDefaultRequiredDescription
sizeStringsmThe alternative modal sizes. Support: lg / md / sm.
titleStringThe modal title.
contentStringThe modal content.
htmlBooleanfalseAllow HTML in content.
okTextStringText of ok button.
okTypeStringprimaryButton type of ok button.
cancelTextStringText of cancel button.
cancelTypeStringdefaultButton type of cancel button.
customClassCustom classes to modal, anything that can work with v-bind:class or :class.
backdropBooleanfalse if type is alert, otherwise trueDismiss the modal by backdrop click.
validatorFunctionCustom validator function for prompt. Accepts the input value as param, returns the err msg (not valid) or null (valid)
defaultValueStringThe default value to fill in prompt box.
inputTypeStringtextThe default input type of prompt box.
autoFocusStringokFocus on button while message box open. Can be ok / cancel, or empty String to disable the feature.
reverseButtonsBooleanfalseReverse the order of ok and cancel button.