Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<template>
    <Button @click="show_message">Show message</Button>
    <Button @click="show_vnode">vnode</Button>
</template>
<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const show_vnode = () => {
    createMessage({ 
        message: h('b', { style: 'color: pink' }, '我是 vnode'), 
        duration: 3000,  
        type: 'success' 
    })
}

const show_message = () => {
  createMessage({ message: 'hello world', duration: 3000,  type: 'success' })
}
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

默认为info。

<template>
    <Button @click="success">success</Button>
    <Button @click="warning">warning</Button>
    <Button @click="info">info</Button>
    <Button @click="error">error</Button>
</template>
<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const success = () => {
    createMessage({ 
        message: 'success', 
        duration: 3000,
        type: 'success' 
    })
}

const warning = () => {
    createMessage({ 
        message: 'warning', 
        duration: 3000,
        type: 'warning' 
    })
}

const info = () => {
    createMessage({ 
        message: 'info', 
        duration: 3000,
        type: 'info' 
    })
}

const error = () => {
    createMessage({ 
        message: 'error', 
        duration: 3000,
        type: 'error' 
    })
}
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

可关闭的消息提示

<template>
    <Button @click="success">success</Button>
    <Button @click="warning">warning</Button>
    <Button @click="info">info</Button>
    <Button @click="error">error</Button>
</template>
<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const success = () => {
    createMessage({ 
        message: 'success', 
        duration: 0,
        type: 'success',
        showClose: true
    })
}

const warning = () => {
    createMessage({ 
        message: 'warning', 
        duration: 0,
        type: 'warning',
        showClose: true 
    })
}

const info = () => {
    createMessage({ 
        message: 'info', 
        duration: 0,
        type: 'info',
        showClose: true 
    })
}

const error = () => {
    createMessage({ 
        message: 'error', 
        duration: 0,
        type: 'error',
        showClose: true
    })
}
</script>
<style scoped>
.vh-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    margin: 6px;
    border-radius: 6px;
}
</style>

参数

属性名	说明	类型	默认值
type	类型	success|warning|info|error	info
showClose	是否显示关闭按钮	true| false	false
duration	关闭时间	number	0
message	内容	string| vNode