Message 消息提示

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

基本用法

<script lang="ts" setup>
import { h } from "vue";
import { SwdMessage } from "swd-design";

const open = () => {
  SwdMessage("This is a message.");
};

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

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

<script lang="ts" setup>
import { SwdMessage } from "swd-design";

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

不同类型

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

<script lang="ts" setup>
import { SwdMessage } from "swd-design";

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

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

可关闭的

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

<script lang="ts" setup>
import { SwdMessage } from "swd-design";

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

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

文字居中

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

<script lang="ts" setup>
import { SwdMessage } from "swd-design";

const openCenter = () => {
  SwdMessage({
    showClose: true,
    message: "Centered text",
    center: true
  });
};
</script>

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

全局方法

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

单独引用

import { SwdMessage } from "swd-design";

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