vue3自定义弹框组件，函数方式调用

缘由：项目要用到一个弹框，需要公共函数内调用。考虑封装成像 Element Plus 的 ElMessageBox.confirm 的方式调用，而不是直接在 template 中写组件的方式调用。

最小实现效果：

原理

• 利用vue createApp 动态 mount 和 unmount 一个组件；
• 动态地 ocument.body.appendChild 显示，document.body.removeChild 销毁

最小化实现：

vim myDialog/myDialog.vue

<template>
  <div v-if="visiable" class="my-dialog">
    <div class="mask" @click="onCancel"></div>
    <div class="dialog-content">
      <div class="dialog-title">{{ props.title }}</div>
      <div class="dialog-body">
        <div>{{ props.message }}</div>
        <slot>
        </slot>
      </div>
      <div class="dialog-footer">
        <div class="btn btn-cancel" @click="onCancel">Cancel</div>
        <div class="btn btn-confirm" @click="onConfirm">Confirm</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'


const props = defineProps({
  title: {
    type: String,
    default: 'Dialog Title'
  },
  message: String,
  onOpen: Function as PropType<() => void>,
  onCancel: Function as PropType<() => void>,
  onConfirm: Function as PropType<(data?: any) => void>,
})

const visiable = defineModel()
const onOpen = () => {
  props?.onOpen()
}
const onCancel = () => {
  props?.onCancel()
}
const onConfirm = () => {
  props?.onConfirm()
}
</script>

<style lang="scss" scoped>
.my-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.dialog-title {
  flex: 0 0 30px;
  font-size: 20px;
  border-bottom: 1px solid #eee;
}
.dialog-body {
  flex: 1;
  min-height: 24px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0 0;
  border-top: 1px solid #eee;
}
.btn {
  color: #fff;
  padding: 2px 10px;
  border: 1 solid #fff;
  border-radius: 4px;
  cursor: pointer;
}
.btn + .btn {
  margin-left: 10px;
}
.btn-cancel {
  background-color: #42b983;
  &:hover {
    background-color: #8ce6c2;
  }
}
.btn-confirm {
  background-color: #1d4ad4;
  &:hover {
    background-color: #8fa7f6;
  }
}
</style>

vim myDialog/index.tsx

import { createApp, ref, watch } from 'vue'
import MyDialog from './myDialog.vue'

export const useConfirmDialog = <T extends any>(
  message?: string,
  title?: string
): Promise<T> => {
  return new Promise((resolve, reject) => {
    const div = document.createElement('div')
    document.body.appendChild(div)

    const app = createApp({
      setup() {
        const visible = ref(true)

        const close = () => {
          visible.value = false
        }

        const onConfirm = (data: any) => {
          close()
          return resolve(data)
        }

        const onCancel = () => {
          close()
          return reject()
        }

        watch(visible, newValue => {
          if (!newValue) {
            app.unmount()
            document.body.removeChild(div)
          }
        })

        return () => (
          <MyDialog
            modelValue={visible.value}
            onUpdate:modelValue={value => {
              visible.value = value
            }}
            message={message}
            title={title}
            onConfirm={onConfirm}
            onCancel={onCancel}
          ></MyDialog>
        )
      },
    })
    app.component(MyDialog.name, MyDialog)
    app.mount(div)
  })
}

demo调用

<template>
  <div>
    <button @click="showMyDialog">showMyDialog</button>
  </div>
</template>
<script setup lang="ts">
import { useConfirmDialog } from './myDialog'
function showMyDialog() {
  useConfirmDialog('hello myDialog', 'title dialog').then(() => {
    console.log('myDialog confirm')
  }).catch(() => {
    console.log('myDialog cancel')
  })
}
</script>