Message

Commonly used for feedback prompts after active operations. The difference from Notification is that the latter is more often used for passive system-level notifications.

Basic Usage

Appears from the top and automatically disappears after 3 seconds.

Show message VNode

Message is very similar to Notification in configuration, so some options are not explained in detail here. There is an options list at the end that can be understood in conjunction with the Notification documentation. FxUI registers a $message method for invocation. Message can accept either a string or a VNode as a parameter, which will be displayed as the main content.

<template>
  <fx-button :plain="true" @click="open">Show message</fx-button>
  <fx-button :plain="true" @click="openVn">VNode</fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message('This is a message');
        
        // this.$message({
        //   isMiddler:1,
        //   iconClass:'no',
        //   duration:100000,
        //   message:'This is a message'
        // });
      },

      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, 'Content can be '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      }
    }
  }
</script>

Expand Copy Copy

Different States

Used to display feedback for "success, warning, info, error" type operations.

Success Warning Info Error

When more custom properties are needed, Message can also accept an object as a parameter. For example, setting the type field can define different states, with the default being info. In this case, the main content is passed in via the message value. We have also registered methods for various Message types, allowing direct calls like open4 without passing the type field.

<template>
  <fx-button :plain="true" @click="open2">Success</fx-button>
  <fx-button :plain="true" @click="open3">Warning</fx-button>
  <fx-button :plain="true" @click="open1">Info</fx-button>
  <fx-button :plain="true" @click="open4">Error</fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message('This is a message');
      },
      open2() {
        this.$message({
          message: 'Congratulations, this is a success message',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          message: 'Warning, this is a warning message',
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('Oops, this is an error message');
      }
    }
  }
</script>

Expand Copy Copy

Closable

Can add a close button.

Info Success Warning Error

By default, Message cannot be manually closed. If a manually closable Message is needed, use the showClose field. Like Notification, Message has a controllable duration. Setting it to 0 means it won't close automatically, with the default being 3000 milliseconds.

<template>
  <fx-button :plain="true" @click="open1">Info</fx-button>
  <fx-button :plain="true" @click="open2">Success</fx-button>
  <fx-button :plain="true" @click="open3">Warning</fx-button>
  <fx-button :plain="true" @click="open4">Error</fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message({
          showClose: true,
          message: 'This is a message'
        });
      },

      open2() {
        this.$message({
          showClose: true,
          message: 'Congratulations, this is a success message',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          showClose: true,
          message: 'Warning, this is a warning message',
          type: 'warning'
        });
      },

      open4() {
        this.$message({
          showClose: true,
          message: 'Oops, this is an error message',
          type: 'error'
        });
      }
    }
  }
</script>

Expand Copy Copy

Center Text

Use the center property to center text horizontally.

Center Text

<template>
  <fx-button :plain="true" @click="openCenter">Center Text</fx-button>
</template>

<script>
  export default {
    methods: {
      openCenter() {
        this.$message({
          message: 'Centered text',
          center: true
        });
      }
    }
  }
</script>

Expand Copy Copy

Using HTML Fragments

The message property supports HTML fragments.

Use HTML Fragment

Set the dangerouslyUseHTMLString property to true, and message will be treated as an HTML fragment.

<template>
  <fx-button :plain="true" @click="openHTML">Use HTML Fragment</fx-button>
</template>

<script>
  export default {
    methods: {
      openHTML() {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong>This is <i>HTML</i> fragment</strong>'
        });
      }
    }
  }
</script>

Expand Copy Copy

:::warning Although the message property supports HTML fragments, dynamically rendering arbitrary HTML on websites is very dangerous as it can lead to XSS attacks (opens new window). Therefore, when dangerouslyUseHTMLString is enabled, ensure the message content is trusted and never assign user-submitted content to the message property. :::

Global Method

FxUI adds a global method $message to Vue.prototype. Therefore, in vue instances, Message can be invoked as shown on this page.

Importing Separately

Import Message separately:

import { Message } from 'fx-ui';

In this case, the invocation method is Message(options). We have also defined methods for each type, such as Message.success(options). Additionally, you can call Message.closeAll() to manually close all instances.

Options

Parameter	Description	Type	Options	Default	PC/Mobile Support
message	Message text	string / VNode	—	—	PC/Mobile doesn't support VNode
type	Theme	string	success/warning/info/error	info	PC/Mobile only supports text/loading/success
iconClass	Custom icon class name, overrides type	string	—	—	PC/Mobile
dangerouslyUseHTMLString	Whether to treat message as HTML fragment	boolean	—	false	PC only
customClass	Custom class name	string	—	—	PC/Mobile
duration	Display duration in milliseconds. 0 means no auto-close	number	—	3000	PC/Mobile
showClose	Whether to show close button	boolean	—	false	PC only
center	Whether to center text	boolean	—	false	PC/Mobile
position	Text position	String	top/middle/bottom	middle	Mobile only
isMiddler	Whether to vertically center the message box	boolean	—	-	PC only
onClose	Callback when closed, parameter is the closed message instance	function	—	—	PC only
offset	Offset from the top of the window	number	—	20	PC only

Methods

Calling Message or this.$message returns the current Message instance. To manually close the instance, call its close method.

Method	Description
close	Close current Message