Message 消息提示

常用于主动操作后的反馈提示，从页面顶部出现，自动消失。

基础用法

从顶部出现，3 秒后自动消失。Message 可以设置不同的类型，用来显示「成功、警告、消息、错误」类的操作反馈。

<script setup>
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const showMessage = (type) => {
  createMessage({
    message: `这是一条${type}消息`,
    type
  })
}
</script>
<template>
  <div class="message-demo">
    <Button @click="showMessage('info')">信息提示</Button>
    <Button @click="showMessage('success')">成功提示</Button>
    <Button @click="showMessage('warning')">警告提示</Button>
    <Button @click="showMessage('danger')">错误提示</Button>
  </div>
</template>

<style scoped>
.message-demo {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}
</style>

可关闭的消息提示

可以添加关闭按钮。默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用 showClose 属性。

<script setup>
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const showMessage = (type) => {
  createMessage({
    message: '这条消息可以手动关闭',
    type,
    showClose: true
  })
}
</script>
<template>
  <div class="message-demo">
    <Button plain type="info" @click="showMessage('info')">显示可关闭的消息</Button>
    <Button plain type="primary" @click="showMessage('success')">显示可关闭的消息</Button>
    <Button plain type="warning" @click="showMessage('warning')">显示可关闭的消息</Button>
    <Button plain type="danger" @click="showMessage('danger')">显示可关闭的消息</Button>
  </div>
</template>

<style scoped>
.message-demo {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}
</style>

自定义显示时间

通过 duration 属性自定义消息显示时间。默认为 3000 毫秒，设为 0 则不会自动关闭。

<script setup>
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'

const showMessage = () => {
  createMessage({
    message: '这条消息将在 10 秒后关闭',
    type: 'info',
    duration: 10000
  })
}
</script>
<template>
  <div class="message-demo">
    <Button @click="showMessage">显示较长时间的消息</Button>
  </div>
</template>

<style scoped>
.message-demo {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
</style>

使用 VNode

message 属性支持传入 VNode 来自定义消息内容。

<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
import Icon from '@/components/Icon/Icon.vue'

const showVNodeMessage = () => {
  createMessage({
    message: h('div', null, [
      h('span', { style: 'color: teal' }, '这是一条'),
      h(Icon, { icon: 'star', style: 'margin: 0 5px; color: gold' }),
      h('span', { style: 'color: teal' }, '自定义内容的消息')
    ]),
    type: 'success'
  })
}
</script>
<template>
  <div class="message-demo">
    <Button @click="showVNodeMessage">显示 VNode 消息</Button>
  </div>
</template>

<style scoped>
.message-demo {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
</style>

全局方法

V-Element 为 Vue.prototype 添加了全局方法 $message。因此在 Vue 实例中可以采用本页面中的方式调用 Message。

单独引用

import { createMessage } from "v-element";

此时调用方法为 createMessage(options)。

Options

参数	说明	类型	默认值
message	消息文字	string / VNode	—
type	消息类型	'success' / 'warning' / 'info' / 'danger'	'info'
duration	显示时间，单位为毫秒。设为 0 则不会自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
offset	Message 距离窗口顶部的偏移量	number	20

方法

调用 createMessage 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 destory 方法。

方法名	说明
destory	关闭当前的 Message

另外，还可以调用 closeAll 方法关闭所有的消息提示：

import { closeAll } from "v-element";

// 关闭所有消息
closeAll();