基础确认弹框

用法习惯跟 ElMessageBox 消息弹框类似

// script代码块
import { MsgBox } from "@/components/msgDialog/index.js"

MsgBox("是否执行该操作！", "提示")
  .then(() => {})
  .catch(() => {})

MsgBox(
  "确认删除","删除物业",
  {
    confirmButtonType: "danger",
    confirmButtonText: "删除",
    dangerouslyUseHTMLString: true
  }
)

MsgBox(
  "确认删除","删除物业",
  {
    confirmButtonType: "danger",
    confirmButtonText: "删除",
    dangerouslyUseHTMLString: true
  },
  {
    "before-close": (done) => {
      done()
    }
  }
)

功能性确认弹框（支持 Header|Main|Footer 插槽自定义）

简易版

<!-- <template代码块> -->
<MsgDialog v-model:isShow="isShow" :msgOption="msgOption" @confirm="confirm">
</MsgDialog>

// script代码块
const MsgDialog = defineAsyncComponent(
  () => import("@/components/msgDialog/index.vue")
)
const isShow = ref(false)
const msgOption = ref({
  loading: false,
  border: false,
  title: "删除记录",
  message: "请确认是否删除当前记录？"
})
const confirm = (res) => {
  msgOption.value.loading = true
  console.log(res)
  isShow.value = false
  msgOption.value.loading = false
}
isShow.value = true

插槽自定义

<!-- <template代码块> -->
<MsgDialog
  v-model:isShow="isShow"
  :msgOption="msgOption"
  @open="open"
  @cancel="cancel"
  @confirm="confirm"
  @close="close"
  @closed="closed"
  :before-close="beforeClose"
>
  <!-- msgHeader插槽 -->
  <template #msgHeader="{ close, titleId, titleClass }">
    <div style="display: flex; justify-content: space-between">
      <div>
        <p :id="titleId" :class="titleClass">拒绝成功</p>
      </div>
      <div
        @click="close"
        style="
            position: absolute;
            top: 0px;
            right: 0px;
            text-align: center;
            line-height: 48px;
            width: 48px;
            height: 48px;
          "
      >
        <el-icon>
          <i-ep-close />
        </el-icon>
      </div>
    </div>
  </template>
  <!-- msgMain插槽 -->
  <template #msgMain>
    <div
      style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        "
    >
      <el-icon size="40" color="green" style="margin: 10px 0px">
        <i-ep-SuccessFilled />
      </el-icon>
      <p style="font-weight: 700">已拒绝</p>
      <p>用户将受到微信通知</p>
    </div>
  </template>
  <!-- msgFooter插槽 -->
  <template #msgFooter>
    <el-button @click="isShow = false">取消</el-button>
    <el-button type="danger" @click="isShow = false"
      >注销（{{ countNum }}s）</el-button
    >
  </template>
</MsgDialog>

// script代码块
const MsgDialog = defineAsyncComponent(
  () => import("@/components/msgDialog/index.vue")
)
const countNum = ref(3)
let time = setInterval(() => {
  if (countNum.value) {
    countNum.value--
  } else {
    clearInterval(time)
  }
}, 1000)
const msgOption = ref({
  showClose: false // 自定义msgHeader插槽close内容需要隐藏原有的close
})
const open = (res) => {
  console.log(res)
}
// 自定义msgFooter插槽内容后原有cancel、confirm方法无效
const cancel = (res) => {
  console.log(res)
}
const confirm = (res) => {
  isShow.value = false
  console.log(res)
}
const close = (res) => {
  console.log(res)
}
const closed = (res) => {
  console.log(res)
}
const beforeClose = (done) => {
  done()
}
const isShow = ref(false)
isShow.value = true

默认配置项

const defaultOptionList = {
  widthType: "w400", // w400 | w520 | w720 | w900
  showClose: true, // 是否显示关闭按钮
  title: "提示",
  message: "是否执行该操作！",
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  closeOnClickModal: true, // 是否可以通过点击 modal 关闭 Dialog
  closeOnPressEscape: true, // 是否可以通过按下 ESC 关闭 Dialog
  center: false, //  header、message、footer 部分居中排列
  headerCenter: false, // header 部分居中排列
  messageCenter: false, // message 部分居中排列
  footerCenter: false, // footer 部分居中排列
  showCancelButton: true, // 是否显示取消按钮
  showConfirmButton: true, // 是否显示确定按钮
  type: null, // 'success' | 'info' | 'warning' | 'error'
  confirmButtonType: "primary", // 'primary' | 'success' | 'info' | 'warning' | 'danger'
  icon: "",
  border: true, // 基础确认弹框规定无分割线 功能性弹框规定具有分割线
  loading: false,
  dangerouslyUseHTMLString: false, // 解析html字符串
  showFooter: true // 是否显示footer
}

统一 ELMessage 消息提示

// script代码块
import {
  succesMsg,
  warnMsg,
  errorMsg,
  infoMsg
} from "@/components/msgDialog/index.js"

succesMsg("成功消息")
warnMsg("警告消息")
errorMsg("错误消息")
infoMsg("一般消息", true, 5 * 1000)