confirmDialog.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import { ref } from 'vue'
  2. import ConfirmDialog from '@/components/ConfirmDialog2.vue'
  3. import { createApp } from 'vue'
  4. interface ConfirmDialogOptions {
  5. title?: string
  6. content: string
  7. confirmText?: string
  8. cancelText?: string
  9. width?: number
  10. onConfirm?: () => void
  11. onCancel?: () => void
  12. }
  13. export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolean> {
  14. return new Promise((resolve) => {
  15. const visible = ref(true)
  16. const container = document.createElement('div')
  17. document.body.appendChild(container)
  18. const app = createApp(ConfirmDialog, {
  19. visible: visible.value,
  20. title: options.title || '提示',
  21. content: options.content,
  22. confirmText: options.confirmText || '确认',
  23. cancelText: options.cancelText || '取消',
  24. width: options.width || 400,
  25. onConfirm: () => {
  26. visible.value = false
  27. setTimeout(() => {
  28. app.unmount()
  29. options.onConfirm?.()
  30. document.body.removeChild(container)
  31. resolve(true)
  32. }, 300)
  33. },
  34. onCancel: () => {
  35. visible.value = false
  36. setTimeout(() => {
  37. app.unmount()
  38. options.onCancel?.()
  39. document.body.removeChild(container)
  40. resolve(false)
  41. }, 300)
  42. },
  43. 'onUpdate:visible': (val: boolean) => {
  44. visible.value = val
  45. }
  46. })
  47. app.mount(container)
  48. })
  49. }