vue3.0 的 MessageBox 彈框

 

 

 1、script lang="ts" 引入：

import { ElMessage, ElMessageBox } from 'element-plus';

2、setup 點擊事件綁定：

function handleDelete(row: any) {
    // console.log(row.id);
    ElMessageBox({
        title: '提示', //MessageBox 標題
        message: '是否確定刪除當前項?', //MessageBox 消息正文內容
        confirmButtonText: '確定', //確定按鈕的文本內容
        cancelButtonText: '取消', //取消按鈕的文本內容
        showCancelButton: true, //是否顯示取消按鈕
        closeOnClickModal: false, //是否可通過點擊遮罩關閉
        type: 'warning', //消息類型，用於顯示圖標
    }).then(() => {
        ElMessage.success('刪除成功!');
    }).catch(() => {
        ElMessage.info('已取消刪除!');
    });
};

3、return 返回點擊事件：

return {
    handleDelete,
}

ElMessageBox 詳細配置見：https://element-plus.gitee.io/#/zh-CN/component/message-box