MessageBox

A set of modal dialog components that simulate system message prompts, used for displaying alerts, confirmation messages, and submission content.

:::tip From a usage scenario perspective, MessageBox serves to enhance the native system alert, confirm, and prompt functions, thus suitable for displaying relatively simple content. For more complex content, please use Dialog. :::

Alert Message

Mobile devices only support $confirm and $message consistently with PC. For other methods, refer to the mobile usage at the bottom.

Triggers when users perform operations, interrupting their workflow until they acknowledge the message.

Info Success Warning Error Toast

Call the $alert method to display an alert message, which simulates the system's alert and cannot be closed via ESC or clicking outside. This example accepts two parameters: message and title. Notably, it returns a Promise object by default for subsequent operations. If browser Promise support is uncertain, include a third-party polyfill or use callbacks as shown here.

<template>
  <fx-button type="primary" @click="open_info">Info</fx-button>
  <fx-button type="primary" @click="open_success">Success</fx-button>
  <fx-button type="primary" @click="open_warning">Warning</fx-button>
  <fx-button type="primary" @click="open_error">Error</fx-button>
  <fx-button type="primary" @click="open_toast">Toast</fx-button>
</template>

<script>
  export default {
    methods: {
      open_info() {
        this.$alert('This is content', 'Title', {
          confirmButtonText: 'Confirm',
          type:'info',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: `
            });
          }
        });
      },
      open_success() {
        this.$alert('This is content', 'Title', {
          confirmButtonText: 'Confirm',
          type:'success',
          callback: action => {
            this.$message({
              type: 'success',
              message: `action: `
            });
          }
        });
      },
      open_warning() {
        this.$alert('This is content', 'Title', {
          confirmButtonText: 'Confirm',
          type:'warning',
          callback: action => {
            this.$message({
              type: 'warning',
              message: `action: `
            });
          }
        });
      },
      open_error() {
        this.$alert('This is content', 'Title', {
          confirmButtonText: 'Confirm',
          type:'error',
          callback: action => {
            this.$message({
              type: 'error',
              message: `action: `
            });
          }
        });
      },
      open_toast() {
        this.$toast('This is content',{
          type:'error'
        });
      },
    }
  }
</script>

Expand Copy Copy

Confirmation

Mobile devices only support $confirm and $message consistently with PC. For other methods, refer to the mobile usage at the bottom.

Used to prompt users to confirm triggered actions.

Click to open Message Box

Call $confirm to display a confirmation dialog, simulating the system's confirm. The MessageBox component offers high customizability via the options parameter (third argument). The type field specifies message type (success/error/info/warning). Note: the second parameter title must be a String type.

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('This operation will permanently delete the file. Continue?', 'Warning', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Deleted successfully!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Deletion canceled'
          });          
        });
      }
    }
  }
</script>

Expand Copy Copy

Prompt

Mobile devices only support $confirm and $message consistently with PC. For other methods, refer to the mobile usage at the bottom.

Interrupts user operations to prompt for input.

Click to open Message Box

Call $prompt to display an input prompt, simulating the system's prompt. Use inputPattern for validation patterns or inputValidator for custom validation functions (return Boolean/String). inputPlaceholder sets the input placeholder.

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$prompt('Please enter email', 'Tip', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: 'Invalid email format'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: 'Your email is: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Input canceled'
          });       
        });
      }
    }
  }
</script>

Expand Copy Copy

Customization

Mobile devices only support $confirm and $message consistently with PC. For other methods, refer to the mobile usage at the bottom.

Supports fully customized configurations.

Click to open Message Box

The three methods above are wrappers for $msgbox. This example directly calls $msgbox with showCancelButton to display a cancel button. Use beforeClose for pre-close operations (must call done() to close).

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: 'Message',
          message: h('p', null, [
            h('span', null, 'Content can be '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = 'Executing...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    }
  }
</script>

Expand Copy Copy

:::tip Content can be VNode, allowing custom components. To force re-rendering when content changes, add unique keys to VNodes. :::

HTML Fragments

Not supported on mobile

The message property supports HTML fragments.

Click to open Message Box

Set dangerouslyUseHTMLString to true to process message as HTML.

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('<strong>This is <i>HTML</i> content</strong>', 'HTML Fragment', {
          dangerouslyUseHTMLString: true
        });
      }
    }
  }
</script>

Expand Copy Copy

:::warning Dynamic HTML rendering is dangerous (XSS risk). Only enable dangerouslyUseHTMLString when content is trusted. Never assign user-submitted content to message. :::

Distinguish Cancel & Close

Differentiate between cancel button clicks and close actions.

Click to open Message Box

Set distinguishCancelAndClose to true to distinguish these actions (returns 'cancel' or 'close').

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('Unsaved changes detected. Save before leaving?', 'Confirm', {
          distinguishCancelAndClose: true,
          confirmButtonText: 'Save',
          cancelButtonText: 'Discard Changes'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: 'Changes saved'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? 'Discarded changes and left'
                : 'Remained on current page'
            })
          });
      }
    }
  }
</script>

Expand Copy Copy

Centered Layout

Supports center-aligned content.

Click to open Message Box

Set center to true to enable centered layout.

<template>
  <fx-button type="text" @click="open">Click to open Message Box</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('This operation will permanently delete the file. Continue?', 'Warning', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Deleted successfully!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Deletion canceled'
          });
        });
      }
    }
  }
</script>

Expand Copy Copy

Global Methods

Mobile devices only support $confirm and $message consistently with PC. For other methods, refer to the mobile usage at the bottom.

When FxUI is fully imported, these global methods are added to Vue.prototype:

• $msgbox(options)
• $alert(message, title, options) or $alert(message, options)
• $confirm(message, title, options) or $confirm(message, options)
• $prompt(message, title, options) or $prompt(message, options)

Import Separately

Not supported on mobile

For individual imports:

import { MessageBox } from 'fx-ui';

Equivalent methods are: MessageBox, MessageBox.alert, MessageBox.confirm, and MessageBox.prompt.

Options

Parameter	Description	Type	Options	Default
title	MessageBox title	string	—	—
message	MessageBox content	string/VNode	—	—
dangerouslyUseHTMLString	Treat message as HTML	boolean	—	false
type	Message type (icon)	string	success/info/warning/error	—
iconClass	Custom icon class (overrides type)	string	—	—
customClass	Custom CSS class	string	—	—
callback	Callback when not using Promise	function(action, instance)	—	—
showClose	Show close button	boolean	—	true
beforeClose	Pre-close callback	function(action, instance, done)	—	—
distinguishCancelAndClose	Distinguish cancel/close	boolean	—	false
lockScroll	Lock body scroll	boolean	—	true
showCancelButton	Show cancel button	boolean	—	false
showConfirmButton	Show confirm button	boolean	—	true
cancelButtonText	Cancel button text	string	—	Cancel
confirmButtonText	Confirm button text	string	—	Confirm
cancelButtonClass	Cancel button CSS class	string	—	—
confirmButtonClass	Confirm button CSS class	string	—	—
closeOnClickModal	Close when clicking overlay	boolean	—	true
closeOnPressEscape	Close on ESC key	boolean	—	true
closeOnHashChange	Close on hashchange	boolean	—	true
showInput	Show input field	boolean	—	false
inputPlaceholder	Input placeholder	string	—	—
inputType	Input type	string	—	text
inputValue	Initial input value	string	—	—
inputPattern	Input validation regex	regexp	—	—
inputValidator	Custom validation function	function	—	—
inputErrorMessage	Validation error message	string	—	Invalid input
center	Center alignment	boolean	—	false
roundButton	Use rounded buttons	boolean	—	false

Mobile Usage

Guidelines

Note: JS object-triggered instances are singleton mode.

Import Separately

Call close method to dismiss dialog.

this.$dialog({
  title: 'Alert',
  message: 'Content',
});

Confirm Dialog

this.$confirm('Content')
  .then(() => {
    // confirm
  })
  .catch(() => {
    // cancel
  });

beforeClose Interceptor

this.$confirm({
  title: 'Confirm',
  message: 'Content',
  beforeClose: (action, close) => {
    if (action === 'confirm') {
      
    } else {
      
    }
  },
});

API

Option	Description	Type	Values	Default
title	Title	String		--
message	Content	String		--
className	Root node CSS class	String		--
showConfirmButton	Show confirm button	Boolean		true
showCancelButton	Show cancel button	Boolean		false
confirmButtonText	Confirm button text	String		Confirm
cancelButtonText	Cancel button text	String		Cancel
showModal	Show overlay	Boolean		true
closeOnClickModal	Close when clicking overlay	Boolean		false
beforeClose	Pre-close callback	Function		--