Message 消息提示

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

基本用法

<script lang="ts" setup>
import { h } from 'vue'
import { SeMessage } from 'seam-element'

const open = () => {
  SeMessage('This is a message.')
}

const openVn = () => {
  SeMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}
</script>

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

<script lang="ts" setup>
import { SeMessage } from 'seam-element'

const open1 = () => {
  SeMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open2 = () => {
  SeMessage.success('Congrats, this is a success message.')
}
</script>
<template>
  <div>
    <se-button @click="open1">插件式调用</se-button>
    <se-button @click="open2">函数式调用</se-button>
    <se-button @click="$message.success('Congrats, this is a success message.')"
      >全局方法调用</se-button
    >
  </div>
</template>

不同类型

用来显示「成功、警告、消息、错误」类的操作反馈。通过 type 属性来配置。

<script lang="ts" setup>
import { SeMessage } from 'seam-element'

const open1 = () => {
  SeMessage('This is a message.')
}
const open2 = () => {
  SeMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  SeMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  SeMessage.error('Oops, this is a error message.')
}
</script>

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

可关闭的

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 此外，和 Notification 一样，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

<script lang="ts" setup>
import { SeMessage } from 'seam-element'

const open1 = () => {
  SeMessage({
    showClose: true,
    message: 'This is a message.',
  })
}
const open2 = () => {
  SeMessage({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  SeMessage({
    showClose: true,
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  SeMessage({
    showClose: true,
    message: 'Oops, this is a error message.',
    type: 'danger',
  })
}
</script>

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

文字居中

通过 center 属性来配置文字是否居中。

<script lang="ts" setup>
import { SeMessage } from 'seam-element'

const openCenter = () => {
  SeMessage({
    showClose: true,
    message: 'Centered text',
    center: true,
  })
}
</script>

<template>
  <se-button plain @click="openCenter">Centered text</se-button>
</template>

全局方法

Message 组件提供了全局方法 $message，在 Vue 实例中可以作为 this.$message 使用。

单独引用

import { SeMessage } from "seam-element";

Message API

Options

Name	Description	Type	Default
message	消息文字	string | VNode	-
type	主题类型	enum - success | warning | error | danger | info	info
duration	显示时间，设置为 0 则不会自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
center	文字是否居中	boolean	false
offset	Message 距离窗口顶部的偏移	number	10
transitionName	自定义 CSS 过渡动画名称	string	fade-up

Handler

Name	Description	Type
close	关闭 Message	() => void