Skip to content

Message 消息提示

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

基础用法

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

Details
vue
<template>
    <a-button type="info"  @click="messageInfo">click to show a message</a-button>
</template>

<script lang="ts" setup>
import { AMessage } from 'amu-ui';

const messageInfo = () => {
    AMessage.message({
        message:'this is a info message'
    })
}
</script>

不同状态

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

Details
vue
<template>
   <ASpace>
    <AButton type="success" @click="showSuccess">show success </AButton>
    <AButton type="info" @click="showMessage">show   Info  </AButton>
    <AButton type="error" @click="showError">show  error </AButton>
    <AButton type="warning" @click="showWarning">show warning </AButton>
   </ASpace>
</template>

<script lang="ts" setup>
import { AMessage } from 'amu-ui';

const showError = () => {
    AMessage.error({
        message: "Display an error message when you click the button",
    });
};

const showSuccess = () => {
    AMessage.success({
        message: "Display an success message when you click the button",
    });
};

const showWarning = () => {
    AMessage.warning({
        message: "this is a warning message",
    });
};

const showMessage = () => {
    AMessage.message({
        message: "this is a info message",
    });
};
</script>