index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import XEUtils from 'xe-utils'
  2. import VXEModal, { allActivedModals } from './src/modal'
  3. import VXETable from '../v-x-e-table'
  4. /* eslint-disable @typescript-eslint/no-use-before-define */
  5. let ModalClass = null
  6. function openModal (opts) {
  7. const options = Object.assign({}, opts, { transfer: true })
  8. return new Promise(resolve => {
  9. if (options && options.id && allActivedModals.some(comp => comp.id === options.id)) {
  10. resolve('exist')
  11. } else {
  12. const events = options.events || {}
  13. options.events = Object.assign({}, events, {
  14. hide (params) {
  15. if (events.hide) {
  16. events.hide.call(this, params)
  17. }
  18. setTimeout(() => $modal.$destroy(), $modal.isMsg ? 500 : 100)
  19. resolve(params.type)
  20. }
  21. })
  22. const $modal = new ModalClass({
  23. el: document.createElement('div'),
  24. propsData: options
  25. })
  26. setTimeout(() => {
  27. if ($modal.isDestroy) {
  28. $modal.close()
  29. } else {
  30. $modal.open()
  31. }
  32. })
  33. }
  34. })
  35. }
  36. /**
  37. * 全局关闭动态的活动窗口(只能用于关闭动态的创建的活动窗口)
  38. * 如果传 id 则关闭指定的窗口
  39. * 如果不传则关闭所有窗口
  40. */
  41. function closeModal (id) {
  42. const modals = arguments.length ? [getModal(id)] : allActivedModals
  43. modals.forEach($modal => {
  44. if ($modal) {
  45. $modal.isDestroy = true
  46. $modal.close('close')
  47. }
  48. })
  49. return Promise.resolve()
  50. }
  51. function getModal (id) {
  52. return XEUtils.find(allActivedModals, $modal => $modal.id === id)
  53. }
  54. const ModalController = {
  55. get: getModal,
  56. close: closeModal,
  57. open: openModal
  58. }
  59. export const modal = ModalController
  60. const shortcutTypes = ['alert', 'confirm', 'message']
  61. shortcutTypes.forEach((type, index) => {
  62. const defOpts = index === 2 ? {
  63. mask: false,
  64. lockView: false,
  65. showHeader: false
  66. } : {
  67. showFooter: true
  68. }
  69. defOpts.type = type
  70. defOpts.dblclickZoom = false
  71. if (index === 1) {
  72. defOpts.status = 'question'
  73. }
  74. ModalController[type] = function (message, title, options) {
  75. let opts
  76. if (XEUtils.isObject(message)) {
  77. opts = message
  78. } else {
  79. if (title) {
  80. opts = index === 2 ? { status: title } : { title }
  81. }
  82. }
  83. return openModal(Object.assign({ message: XEUtils.toValueString(message), type }, defOpts, opts, options))
  84. }
  85. })
  86. export const Modal = Object.assign(VXEModal, {
  87. install (Vue) {
  88. VXETable._modal = 1
  89. Vue.component(VXEModal.name, VXEModal)
  90. ModalClass = Vue.extend(VXEModal)
  91. VXETable.modal = ModalController
  92. if (!Vue.prototype.$vxe) {
  93. Vue.prototype.$vxe = { modal: ModalController }
  94. } else {
  95. Vue.prototype.$vxe.modal = ModalController
  96. }
  97. }
  98. })
  99. export default Modal