modals.ts 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import { createApp, h, onMounted, ref } from 'vue'
  2. import { Modal } from 'ant-design-vue'
  3. export function openModal(contentComp: any, contentProps: any, modalProps?: any) {
  4. const newElement = document.createElement('div')
  5. document.getElementById('app')?.appendChild(newElement)
  6. const openModal = ref(true)
  7. const app = createApp({
  8. setup(props, content) {
  9. return () => {
  10. return h(
  11. Modal,
  12. {
  13. open: openModal.value,
  14. title: '标题',
  15. ...modalProps,
  16. destroyOnClose: true,
  17. cancelText: '取消',
  18. okText: '确定',
  19. onCancel: () => {
  20. openModal.value = false
  21. },
  22. onOk: () => {
  23. if (modalProps.onOk) {
  24. console.log(document.getElementsByClassName('contentRef'))
  25. modalProps.onOk()
  26. } else {
  27. openModal.value = false
  28. }
  29. }
  30. },
  31. () => h(contentComp, { ref: 'contentRef', ...contentProps })
  32. )
  33. }
  34. }
  35. })
  36. app.mount(newElement)
  37. }