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>