Install

npm install vue-m-message

yarn add vue-m-message

vue-m-message

A message plugin base on Vue.

v4.x version only supports Vue 3; If you use Vue 2, use v3.x instead.

Preview

中文 | Live Demo

 npm install vue-m-message

# Vue 2
# npm install vue-m-message@3

 import { createApp, h } from 'vue'
import Message from 'vue-m-message'
import 'vue-m-message/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(Message)
// or
app.use(Message, options: { name?: string, defaultOptions?: MessageTypeOptions })

// Message.info('Wellcome here !', { duration: -1, ctx: instance?.appContext })
// Message.info(h('m-demo', 'Wellcome here !'), { duration: -1 })
Message.info(() => h('div', [
  'Here is playground for ',
  h('a', { href: 'https://github.com/mengdu/m-message' },'Vue Message'),
  ' plugin.'
]), {
  title: 'Wellcome here !',
  duration: -1,
  iconURL: 'https://avatars.githubusercontent.com/u/11366654?s=40&v=4'
})
// Message.info(<m-demo>Wellcome here !</m-demo>, { duration: -1 })
// Message.info(() => <m-demo>Wellcome here !</m-demo>, { duration: -1 })

app.mount('#app')

Message API

Message(options: MessageOptions): MessageIntance General prompt information
Message.info(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance Info prompt information
Message.success(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance Success prompt information
Message.error(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance Error prompt information
Message.warning(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance Warning prompt information
Message.loading(message: string | VNode | (() => VNode), options?: MessageTypeOptions): MessageIntance Loading prompt information
Message.closeAll(): void Clear all prompts
Message.setDefault(options: MessageTypeOptions): void Set default values

 type MessageTypeOptions = Omit<MessageOptions, 'type' | 'message'>

interface MessageIntance {
  id: string
  close: () => void
}

MessageOptions

Attribute	Description	Type	Optional value	Default
type	Message type icon	string	'', 'info', 'success', 'error', 'warning', 'loading'	'info'
iconURL	Replace type icon with picture	string	—	—
title	Message title	string	—	''
message	Message content	string	—	''
position	Message display position	string	'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right'
duration	Message display duration, in MS; When ` - 1 ', it needs to be closed manually	number	—	3000
width	Message block width, auto width by default	string	—	''
className	class name	string	—	—
wrapperClassName	class name for wrapper	string	—	—
zIndex	z-index	number	—	1010
supportHTML	Whether the message content supports HTML (only valid when the message is a string)	boolean	true/false	false
isCollapsed	Collapse content	boolean	true/false	false
collapsable	Collapsable	boolean	true/false	false
closable	Whether it can be closed	boolean	true/false	false
hasMask	Does it contain a mask	boolean	true/false	false
stopTimerOnHover	Whether to recalculate the display duration when the mouse moves over	boolean	true/false	true
onClose	Close callback	() => void	—	—
onCollapsed	Fold switch callback	(collapsed: boolean) => void	—	—