ElMessageBox的使用

一般情况下ElMessageBox会配合Button类的组件来使用，但是默认的情况下ElMessageBox的确定键，取消键或者其它内容是英文，新手会很疑惑怎么去修改这些

例如：

<script lang="ts" setup>
    
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}


</script>

<template>
    <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

代码不能直接在HTML中改，此时需要用到ElMessageBox的配置选项

格式：ElMessageBox.类型(“显示的内容”,“标题”,{

配置项

})

例如：

ElMessageBox.alert('这是一段内容', '标题名称', {  

  confirmButtonText: '确定', // 设置确定按钮的文本  

  type: 'warning', // 设置消息框的类型  

  callback: action => {  

    if (action === 'confirm') {  

      // 当用户点击确定按钮时执行的回调  

      console.log('用户点击了确定按钮');  

    }  

  }  

});  

  

// 或者，如果你需要更多按钮选项，可以使用 confirm 方法  

ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {  

  confirmButtonText: '确定',  

  cancelButtonText: '取消',  

  type: 'warning',  

  callback: action => {  

    if (action === 'confirm') {  

      // 用户点击确定  

      console.log('用户点击了确定按钮');  

    } else if (action === 'cancel') {  

      // 用户点击取消  

      console.log('用户点击了取消按钮');  

    }  

  }  

});