ElMessage - daniel-qa/Vue GitHub Wiki

ElMessage

#

    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、持续时间、位置等,给开发者提供了更多的控制

⚠️ **GitHub.com Fallback** ⚠️