messageTip Message

A lightweight information feedback component that appears centered at the top and disappears automatically. Multiple tip states are available.

Basic Usage

Basic usage, closes automatically after 3 seconds by default.

<template>
  <div>
    <b-button @click="message1">info</b-button>
    <b-button @click="message2">render function</b-button>
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { Message } from 'bin-ui-design'

function message1() {
  Message('A normal message notification!')
}

function message2() {
  Message.info({
    message: h('i', { style: 'color: red' }, 'Content rendered by render function.')
  })
}
</script>

Different Types

Used to show operation feedback for "success, warning, info, error" categories.

<template>
  <div>
    <b-button type="primary" plain @click="message1">info</b-button>
    <b-button type="success" plain @click="message2">success</b-button>
    <b-button type="warning" plain @click="message3">warning</b-button>
    <b-button type="danger" plain @click="message4">error</b-button>
  </div>
</template>

<script setup lang="ts">
import { Message } from 'bin-ui-design'

function message1() {
  Message.info('I am a normal info message')
}
function message2() {
  Message.success('This is a success message')
}
function message3() {
  Message.warning('This is a warning message')
}
function message4() {
  Message.error('This is an error message')
}
</script>

Other Parameters

Can set configuration parameters for rendering

<template>
  <div>
    <b-button @click="message1">I disappear in 10s</b-button>
    <b-button @click="message2">Closable</b-button>
    <b-button @click="message3">Won't Close</b-button>
  </div>
</template>

<script setup lang="ts">
import { Message } from 'bin-ui-design'

function message1() {
  Message.info({ message: 'I disappear in 10s', duration: 10 })
}
function message2() {
  Message.success({ message: 'I am a closable notification', duration: 5, showClose: true })
}
function message3() {
  Message.warning({ message: 'I will never close unless manually dismissed', duration: 0, showClose: true, zIndex: 3000 })
}
</script>

Manual Close

You can call the closeAll() function from the Message module to manually close all messages.

<template>
  <div>
    <b-button @click="message">Create three messages that won't close</b-button>
    <b-button @click="closeAll">Close All</b-button>
  </div>
</template>

<script setup lang="ts">
import { Message } from 'bin-ui-design'

function message() {
  Message.warning({ message: 'Message1', duration: 0 })
  Message.warning({ message: 'Message2', duration: 0 })
  Message.warning({ message: 'Message3', duration: 0 })
}

function closeAll() {
  Message.closeAll()
}
</script>

API

In Vue 3, import the Message function and call it. The parameter can be a string or a CreateMessageProps object. For convenience, four type-specific call methods are also provided.

import { Message } from 'bin-ui-design'

// Options can be passed as a string. If a string is provided, it uses the default configuration and fills the message property.
Message(options)
Message.info(options)
Message.success(options)
Message.warning(options)
Message.error(options)

Options Object

Function	Description	Type	Default
message	Notice content	String	—
duration	Auto-close delay in seconds. Set to 0 to disable auto-close	Number	3
onClose	Callback when closed	Function	—
showClose	Whether to show close button	Boolean	true
useHTML	Whether to insert the message as an HTML fragment. Use with caution	Boolean	false
offset	Offset from the top. Setting this fixes a message at a specific position from the window top (no downward stacking)	Number	—
zIndex	Z-index level, incrementing from 2000 by default	Number	—