封装消息提示方法，通过js方法实现

最近遇到一个需要自定义的消息提示需求，方便其他成员使用，使用js封装，实现传参渲染

代码如下

import { createVNode, render, createApp } from 'vue'
import Index from './index.vue'
import { ElDialog } from 'element-plus'
type DefaultProps = {
  /**header 显示内容，于dialog的tilte不一样 */
  header: string
  content: string
}
export type IDialogProps = Partial<DefaultProps> & InstanceType<typeof ElDialog>['$props']

/**
 * @description 自定义消息提示弹窗，使用js调用的方式，方便使用,在回调then触发confirm
 * @param dialogProps
 * @returns
 */
export const useMessageTip = async (dialogProps: IDialogProps = {}) => {
  const vNode = createVNode(Index)
  render(vNode, document.getElementById('messege-tip')!)
  const { open } = vNode.component?.exposed as InstanceType<typeof Index>
  return open(dialogProps)
}

组件内容

<template>
  <el-dialog modal-class="message-tip-dialog" :modelValue="show" v-bind="dialogProps" :before-close="cancel">
    <template #header>
      <div class="cancel-header">
        <img src="@/assets/images/message-box-icon.png" alt="" />
        {{ dialogProps.header }}
      </div>
    </template>
    <div class="cancel-content">{{ dialogProps.content }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <div ref="confirmButtonRef">
          <el-button type="primary"> 确认 </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { IDialogProps } from './useMessageTip'

const show = ref(false)

const defaultPros = {
  content: '是否确认注销该数据资源',
  header: '温馨提示',
  showClose: false,
  width: 464,
  alignCenter: true,
}

const dialogProps = ref<IDialogProps>(defaultPros)

const cancel = () => (show.value = false)

const confirmButtonRef = ref()

defineExpose({
  open: (props: IDialogProps) => {
    dialogProps.value = {
      ...defaultPros,
      ...props,
    }
    show.value = true
    return new Promise<any>((resolve, reject) => {
      nextTick(() => {
        confirmButtonRef.value.addEventListener('click', () => {
          cancel()
          resolve(true)
        })
      })
    })
  },
})
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
</style>

函数调用

import { useMessageTip } from '@/components/MessageTip/useMessageTip'
const handleCancel = () => {
  useMessageTip().then(() => confirmCancel())
}

实现了element-message的回调.then方法，

在此记录，为了后续的使用，方便查找