vue3.0 如何获得引用element plus的messagebox模板如何写回调函数

• 1.比如找到官网的这个messagebox,复制原文，然后我们来试一试如何添加回调函数吧

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

const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

• 2.我们来看官网对于callback使用的说明：

  这里说清楚了，回调函数有2个参数，一个是action,一个是instance,那们来添加一下：

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

import {getDepart} from '../apis/depart'
export default {
 setup(){
　　const datapa=reactive({
　　　　formData:{
　　　　  depart:"" //depart默认值
　　　　}
　　})
　}
}
const open = () => { 
 ElMessageBox.confirm( 'proxy will permanently delete the file. Continue?', 'Warning', {
　　　confirmButtonText: 'OK', 
　　　cancelButtonText: 'Cancel', 
　　　type: 'warning',
　　　callback:(action,instance)=>{
        if(action==="confirm"){
　　　　 let data={"depart","deparment_1"} //注意使用Promise时，给后端传参的数据类型必须是object类型的
         getDepart(data).then(res=>{
  　　　　  datapa.formData.depart=res["depart"]
　　　　
　　　　　})
　　　　}
　　　}
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
//导出所有的方法
return{
　　open //导出open方法
}
</script>
 

搞定了！