消息提示 Message

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。 分为 "text", "success", "warning", "error", "loading" 5种类型的消息提示。

示例代码

<script setup lang="ts">
import { Message } from "earthsdk-ui";
const messageSuccess = () => {
  Message.success("成功");
};
const messageWarning = () => {
  Message.warning("警告");
};
const messageError = () => {
  Message.error("错误");
};
const messageText = () => {
  Message.text("文本");
};

// 使用 Message.loading需要为其指定一个id
const messageLoading = () => {
  Message.loading({ id: "xxx", content: "loading" });
};

// 关闭loading消息提示函数
const messages = () => {
  //根据id移除loading
  Message.remove("xxx");
};
</script>
<template>
  <div class="es-button_content">
    <es-button class="es-button" @click="messageSuccess">成功</es-button>
    <es-button class="es-button" @click="messageWarning">警告</es-button>
    <es-button class="es-button" @click="messageError">错误</es-button>
    <es-button class="es-button" @click="messageText">文本</es-button>
    <div class="es-button_content_loading">
      <es-button class="es-button" @click="messageLoading"
        >打开loading消息提示</es-button
      >
      <es-button class="es-button" @click="messages"
        >关闭loading消息提示</es-button
      >
    </div>
  </div>
</template>

<style scoped>
.es-button_content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.es-button {
  margin: 5px;
}

.es-button_content_loading {
  display: flex;
}
</style>

Attributes

属性名	说明	类型	默认值
id	唯一标识	string	null
type	消息提示类型(若为其指定"type",则此"type"优先级最高)	string	text
content	消息提示内容	string	""
duration	延迟关闭时间	number	3000
closeable	是否允许手动关闭	boolean	false
plain	是否开启无背景展示	boolean	false

Events

事件名	说明	Type
onClose	关闭后的回调函数	Function

Method

方法名	说明	Type
remove	移除Message	Function
removeAll	移除全部Message	Function