提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

我们在使用messageBox时，想要插入img图片，或者是指定一些样式都不太方便，所以我对其进行二次封装成一个hooks，我们可以将写好的组件插入messageBox中

一、代码

UseMessageBox.ts

import { ElMessageBox } from 'element-plus';
import { createApp, nextTick } from "vue";


interface MessageBoxOptions {
  title?: string;
  closeOnClickModal?: boolean;
  [propName: string]: any
}

export function useMessageBox() {
  const showCustomMessageBox = (options: MessageBoxOptions) => {
    const {
      messageMain = '',              //  文本内容
      iconCnt,                      //  图标组件
      customClass = 'custom-message-box',        //MessageBox 的自定义类名
    } = options;


    return new Promise<void>((resolve, reject) => {
      const MessageBoxConstructor = ElMessageBox as any;
      MessageBoxConstructor({
        ...options,
        closeOnClickModal,
        customClass,
        title,
        message: `<div class="message-content">
                    <div class="icon-class"></div>
                    <div class="title-class">${messageMain}</div>
                </div>`,
        callback: (action: string) => {
          if (action === 'confirm') {
            resolve();
          } else {
            reject();
          }
        },
        dangerouslyUseHTMLString: true,     //是否将 message 作为 HTML 片段处理
      })
      nextTick(() => {
        const app = createApp(iconCnt)                        //创建实例
        app.mount('.el-message-box__message .icon-class')	  //挂载
      });

    })
  };
  return {
    showCustomMessageBox,
  };
}

二、调用

<template>
  <div class="about">
    <el-button @click="showMessageBox">这是一个自定义消息弹框</el-button>
  </div>
</template>

<script setup lang="ts">
import { useMessageBox } from '@/hooks/UseMeeageBox';
import Test from '@/components/test.vue'
const { showCustomMessageBox } = useMessageBox();

const showMessageBox = () => {
  showCustomMessageBox({
    // messageMain: '你好',
    iconCnt: Test,
    title: '',
    center: true,
  }).then(() => {
    console.log(123);
  }).catch(() => {
    console.log(222);
  })
};
</script>

<style lang="scss" scoped></style>

三、效果图

我们可以将编辑好的组件直接引入，显示在messageBox中