ElMessage - daniel-qa/Vue GitHub Wiki
const goToSendMsg = () => {
ElMessage.info("回到推送訊息");
};
ElMessage.success("操作成功") – 綠色,表示成功。
ElMessage.warning("請注意") – 橙色,表示警告。
ElMessage.error("發生錯誤") – 紅色,表示錯誤。
ElMessage.info("這是資訊消息") – 默認藍色,表示一般訊息。
-
ElMessage 主要用于简单的提示消息,如成功、错误、警告等,通常是短暂的、不需要用户交互的通知。
-
ElMessage 會自动关闭的,除非设置为手动关闭。
<template>
<el-button type="primary" @click="showMessage">顯示訊息</el-button>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const showMessage = () => {
ElMessage('這是一條簡單的提示訊息');
}
</script>
<style scoped>
/* 這裡可以加入樣式 */
</style>
- ElMessage 格式
ElMessage({
message: `已加入 ${school.name}`, // 显示的提示信息,动态插入 school.name
type: "success", // 消息类型为 "success",表示成功
});
- ElMessage 可以设置消息类型
success、error、warning、持续时间、位置等,给开发者提供了更多的控制。