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>
export default {
  methods: {
    alert() {
      this.$alert(
        {
          title: 'Title',
          content: 'This is an alert message.',
        },
        (msg) => {
          // callback after modal dismissed
          this.$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>
export default {
  methods: {
    confirm() {
      this.$confirm({
        title: 'Confirm',
        content: 'This item will be permanently deleted. Continue?',
      })
        .then(() => {
          this.$notify({
            type: 'success',
            content: 'Delete completed.',
          })
        })
        .catch(() => {
          this.$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>
export default {
  methods: {
    confirm() {
      this.$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) => {
          this.$notify({
            type: 'success',
            content: `You email address is ${value}`,
          })
        })
        .catch(() => {
          this.$notify('Input canceled.')
        })
    },
  },
}
</script>

Global methods

Following global methods for Vue.prototype 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.

注意

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 Vue from 'vue'
import { MessageBox } from 'uiv'
Vue.prototype.$alert = MessageBox.alert
// ...

API Reference

MessageBox (opens new window)

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.