vue-ptc/src/components/dialog/index.ts

import { reactive, h } from 'vue'
import PtcDialog from './Dialog.vue'
import { mountComponent } from '../utils/mount-component'

interface DialogProps {
  visible: boolean
  title?: string
  content?: string
  showCancel?: boolean
  cancelText?: string
  confirmText?: string
}

type DialogOptions = Omit<DialogProps, 'visible'> & {
  onCancel?(): void
  onConfirm?(): void
}

interface DialogExposed {
  open(options: DialogOptions): void
}

const defaultOptions: Partial<DialogOptions> = {
  showCancel: false,
  cancelText: 'CANCEL',
  confirmText: 'OK',
}

let instance: DialogExposed | undefined

function getInstance() {
  if (!instance) {
    instance = mountComponent<DialogExposed>({
      setup(props, { expose }) {
        const state = reactive<DialogProps>({ visible: false })
        const attrs = {
          'onUpdate:visible': (v: boolean) => {
            state.visible = v
          },
        }
        const open = (options: DialogOptions) => {
          state.visible = true
          Object.assign(state, { ...defaultOptions, ...options })
        }
        expose({ open })

        return () => h(PtcDialog, { ...state, ...attrs })
      },
    }).instance
  }
  return instance
}

export default function Dialog(options: DialogOptions) {
  return new Promise((resolve, reject) => {
    getInstance().open({
      ...options,
      onCancel: reject,
      onConfirm: () => resolve('ok'),
    })
  })
}

Dialog.alert = (title: string, content: string, options?: DialogOptions) =>
  Dialog({ title, content, ...options })
Dialog.confirm = (title: string, content: string, options?: DialogOptions) =>
  Dialog({ title, content, showCancel: true, ...options })

const win: any = window
win.Dialog = Dialog