confirmDialog.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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. }
  11. export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolean> {
  12. return new Promise((resolve) => {
  13. const visible = ref(true)
  14. const container = document.createElement('div')
  15. document.body.appendChild(container)
  16. const app = createApp(ConfirmDialog, {
  17. visible: visible.value,
  18. title: options.title || '提示',
  19. content: options.content,
  20. confirmText: options.confirmText || '确认',
  21. cancelText: options.cancelText || '取消',
  22. width: options.width || 400,
  23. onConfirm: () => {
  24. visible.value = false
  25. setTimeout(() => {
  26. app.unmount()
  27. document.body.removeChild(container)
  28. resolve(true)
  29. }, 300)
  30. },
  31. onCancel: () => {
  32. visible.value = false
  33. setTimeout(() => {
  34. app.unmount()
  35. document.body.removeChild(container)
  36. resolve(false)
  37. }, 300)
  38. },
  39. 'onUpdate:visible': (val: boolean) => {
  40. visible.value = val
  41. }
  42. })
  43. app.mount(container)
  44. })
  45. }