vue3.x + elementplus组合式api怎么实现this.$confirm和this.$message

vue3.x+element plus 双汉堡组合,绝对是让你吃的饱饱的。
用vue2.x 实现的时候大家都会就是element官网例子写的一样

1.Options API实现

mounted(){
	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
}

2.Composition API实现
用组合式api方式实现有一个问题，就是在setup() 函数里面我们调用不了this,那elementPlus官网给的代码就套用不了了，因为不论是this.$confirm还是this.$message我们执行的时候都会报错，提示找不到这个模块。

这个时候就想问，为啥element官网不给Composition API的实例代码。

因此我们想调用这个模块，就需要引入 MessageBox 和 ElMessage，这很Composition api

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

// 这里我只是贴上两段代码，其余自行补上

setup() {
    const allDel= ()=>{
      ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ElMessage.success({
            message: '删除成功!'
          });
        }).catch(() => {
          ElMessage.info({
            message: '已取消删除'
          });
        });
    }
    return {
      allDel
    };
  },

其实element官网也是告诉了我们组合式api方式实现

confirm引用方式

message引用方式

没啥特别的，下班了