ETU组件库

Appearance

Return to top
On this page

Message 消息提示

常用于主动操作后的反馈提示。

基础用法

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

<template>
  <etu-button @click="open">点击展示message</etu-button>
</template>

<script setup lang="ts">
import EtuMessage from "@etu-design/message";

const open = () => {
  EtuMessage("33333");
};
</script>

<template>
  <etu-button @click="open">点击展示message</etu-button>
</template>

<script setup lang="ts">
import EtuMessage from "@etu-design/message";

const open = () => {
  EtuMessage("33333");
};
</script>

不同状态

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

<template>
  <etu-button @click="open1">success</etu-button>
  <etu-button @click="open2">warning</etu-button>
  <etu-button @click="open3">message</etu-button>
  <etu-button @click="open4">error</etu-button>
</template>

<script lang="ts" setup>
import EtuMessage from "@etu-design/message";

const open1 = () => {
  EtuMessage.success("这是一条success消息");
};

const open2 = () => {
  EtuMessage.warning("这是一条warning消息");
};

const open3 = () => {
  EtuMessage("这是一条message消息");
};

const open4 = () => {
  EtuMessage.error("这是一条error消息");
};
</script>

<template>
  <etu-button @click="open1">success</etu-button>
  <etu-button @click="open2">warning</etu-button>
  <etu-button @click="open3">message</etu-button>
  <etu-button @click="open4">error</etu-button>
</template>

<script lang="ts" setup>
import EtuMessage from "@etu-design/message";

const open1 = () => {
  EtuMessage.success("这是一条success消息");
};

const open2 = () => {
  EtuMessage.warning("这是一条warning消息");
};

const open3 = () => {
  EtuMessage("这是一条message消息");
};

const open4 = () => {
  EtuMessage.error("这是一条error消息");
};
</script>

可关闭的消息提示

可以添加关闭按钮。

设置showClose以手动关闭

<template>
  <etu-button @click="open1">success</etu-button>
  <etu-button @click="open2">warning</etu-button>
  <etu-button @click="open3">message</etu-button>
  <etu-button @click="open4">error</etu-button>
</template>

<script lang="ts" setup>
import EtuMessage from "@etu-design/message";

const open1 = () => {
  EtuMessage({
    type: "success",
    message: "这是一条可关闭的success消息",
    showClose: true,
  });
};

const open2 = () => {
  EtuMessage({
    type: "warning",
    message: "这是一条可关闭的warning消息",
    showClose: true,
  });
};

const open3 = () => {
  EtuMessage({
    message: "这是一条可关闭的message消息",
    showClose: true,
  });
};

const open4 = () => {
  EtuMessage({
    type: "error",
    message: "这是一条可关闭的error消息",
    showClose: true,
  });
};
</script>

<template>
  <etu-button @click="open1">success</etu-button>
  <etu-button @click="open2">warning</etu-button>
  <etu-button @click="open3">message</etu-button>
  <etu-button @click="open4">error</etu-button>
</template>

<script lang="ts" setup>
import EtuMessage from "@etu-design/message";

const open1 = () => {
  EtuMessage({
    type: "success",
    message: "这是一条可关闭的success消息",
    showClose: true,
  });
};

const open2 = () => {
  EtuMessage({
    type: "warning",
    message: "这是一条可关闭的warning消息",
    showClose: true,
  });
};

const open3 = () => {
  EtuMessage({
    message: "这是一条可关闭的message消息",
    showClose: true,
  });
};

const open4 = () => {
  EtuMessage({
    type: "error",
    message: "这是一条可关闭的error消息",
    showClose: true,
  });
};
</script>

Message配置项

属性说明类型默认值
message消息文字string / VNode / (() => VNode)—
type消息类型'success' / 'warning' / 'info' / 'error''info'
duration显示时间，单位为毫秒。 设为 0 则不会自动关闭number3000
show-close是否显示关闭按钮booleanfalse
on-close关闭时的回调函数, 参数为被关闭的 message 实例function—
offsetMessage 距离窗口顶部的偏移量number20

Message方法

方法名描述
close关闭当前的 Message