Popconfirm 氣泡確認框

就地跳出的輕量確認氣泡,直接指向被操作的元素。使用 Element Plus 的 el-popconfirm。

設計準則

• 用於「就地、低風險」的二次確認:刪除表格中的某一列、停用某個開關;影響大、後果嚴重的用 MessageBox 更慎重
• 比 MessageBox 輕,不遮罩、不打斷,適合列表中密集的小操作
• 危險操作的確認鈕用對應語意色(刪除 danger、停用 warning),文字用動詞
• 標題一句話說清楚要確認什麼;需要更多說明時就升級用 MessageBox
• 觸發元素放在 #reference 插槽內(通常是按鈕)

基本用法(刪除確認)

loading

自訂圖示與按鈕

loading

Do / Don't

✅ Do	❌ Don't
就地、低風險的小確認	高風險操作也只用氣泡
確認鈕用語意色 + 動詞	危險操作用普通「確定」
標題一句話說清楚	塞一大段說明進氣泡

給工程師

• 常用 props:title、confirm-button-text、cancel-button-text、confirm-button-type、icon、icon-color、width(最小 150)
• 事件:@confirm、@cancel;必要觸發元素放 #reference 插槽;可用 #actions 自訂底部按鈕
• 完整 API 見 Element Plus Popconfirm 文件。本站規範優先於 EP 文件中的視覺建議。