main.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. const defaults = {
  2. title: null,
  3. message: '',
  4. type: '',
  5. iconClass: '',
  6. showInput: false,
  7. showClose: true,
  8. modalFade: true,
  9. lockScroll: true,
  10. closeOnClickModal: true,
  11. closeOnPressEscape: true,
  12. closeOnHashChange: true,
  13. inputValue: null,
  14. inputPlaceholder: '',
  15. inputType: 'text',
  16. inputPattern: null,
  17. inputValidator: null,
  18. inputErrorMessage: '',
  19. showConfirmButton: true,
  20. showCancelButton: false,
  21. confirmButtonPosition: 'right',
  22. confirmButtonHighlight: false,
  23. cancelButtonHighlight: false,
  24. confirmButtonText: '',
  25. cancelButtonText: '',
  26. confirmButtonClass: '',
  27. cancelButtonClass: '',
  28. customClass: '',
  29. beforeClose: null,
  30. dangerouslyUseHTMLString: false,
  31. center: false,
  32. roundButton: false,
  33. distinguishCancelAndClose: false
  34. };
  35. import Vue from 'vue';
  36. import msgboxVue from './main.vue';
  37. import merge from 'element-ui/src/utils/merge';
  38. import { isVNode } from 'element-ui/src/utils/vdom';
  39. const MessageBoxConstructor = Vue.extend(msgboxVue);
  40. let currentMsg, instance;
  41. let msgQueue = [];
  42. const defaultCallback = action => {
  43. if (currentMsg) {
  44. let callback = currentMsg.callback;
  45. if (typeof callback === 'function') {
  46. if (instance.showInput) {
  47. callback(instance.inputValue, action);
  48. } else {
  49. callback(action);
  50. }
  51. }
  52. if (currentMsg.resolve) {
  53. if (action === 'confirm') {
  54. if (instance.showInput) {
  55. currentMsg.resolve({ value: instance.inputValue, action });
  56. } else {
  57. currentMsg.resolve(action);
  58. }
  59. } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
  60. currentMsg.reject(action);
  61. }
  62. }
  63. }
  64. };
  65. const initInstance = () => {
  66. instance = new MessageBoxConstructor({
  67. el: document.createElement('div')
  68. });
  69. instance.callback = defaultCallback;
  70. };
  71. const showNextMsg = () => {
  72. if (!instance) {
  73. initInstance();
  74. }
  75. instance.action = '';
  76. if (!instance.visible || instance.closeTimer) {
  77. if (msgQueue.length > 0) {
  78. currentMsg = msgQueue.shift();
  79. let options = currentMsg.options;
  80. for (let prop in options) {
  81. if (options.hasOwnProperty(prop)) {
  82. instance[prop] = options[prop];
  83. }
  84. }
  85. if (options.callback === undefined) {
  86. instance.callback = defaultCallback;
  87. }
  88. let oldCb = instance.callback;
  89. instance.callback = (action, instance) => {
  90. oldCb(action, instance);
  91. showNextMsg();
  92. };
  93. if (isVNode(instance.message)) {
  94. instance.$slots.default = [instance.message];
  95. instance.message = null;
  96. } else {
  97. delete instance.$slots.default;
  98. }
  99. ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
  100. if (instance[prop] === undefined) {
  101. instance[prop] = true;
  102. }
  103. });
  104. document.body.appendChild(instance.$el);
  105. Vue.nextTick(() => {
  106. instance.visible = true;
  107. });
  108. }
  109. }
  110. };
  111. const MessageBox = function(options, callback) {
  112. if (Vue.prototype.$isServer) return;
  113. if (typeof options === 'string' || isVNode(options)) {
  114. options = {
  115. message: options
  116. };
  117. if (typeof arguments[1] === 'string') {
  118. options.title = arguments[1];
  119. }
  120. } else if (options.callback && !callback) {
  121. callback = options.callback;
  122. }
  123. if (typeof Promise !== 'undefined') {
  124. return new Promise((resolve, reject) => { // eslint-disable-line
  125. msgQueue.push({
  126. options: merge({}, defaults, MessageBox.defaults, options),
  127. callback: callback,
  128. resolve: resolve,
  129. reject: reject
  130. });
  131. showNextMsg();
  132. });
  133. } else {
  134. msgQueue.push({
  135. options: merge({}, defaults, MessageBox.defaults, options),
  136. callback: callback
  137. });
  138. showNextMsg();
  139. }
  140. };
  141. MessageBox.setDefaults = defaults => {
  142. MessageBox.defaults = defaults;
  143. };
  144. MessageBox.alert = (message, title, options) => {
  145. if (typeof title === 'object') {
  146. options = title;
  147. title = '';
  148. } else if (title === undefined) {
  149. title = '';
  150. }
  151. return MessageBox(merge({
  152. title: title,
  153. message: message,
  154. $type: 'alert',
  155. closeOnPressEscape: false,
  156. closeOnClickModal: false
  157. }, options));
  158. };
  159. MessageBox.confirm = (message, title, options) => {
  160. if (typeof title === 'object') {
  161. options = title;
  162. title = '';
  163. } else if (title === undefined) {
  164. title = '';
  165. }
  166. return MessageBox(merge({
  167. title: title,
  168. message: message,
  169. $type: 'confirm',
  170. showCancelButton: true
  171. }, options));
  172. };
  173. MessageBox.prompt = (message, title, options) => {
  174. if (typeof title === 'object') {
  175. options = title;
  176. title = '';
  177. } else if (title === undefined) {
  178. title = '';
  179. }
  180. return MessageBox(merge({
  181. title: title,
  182. message: message,
  183. showCancelButton: true,
  184. showInput: true,
  185. $type: 'prompt'
  186. }, options));
  187. };
  188. MessageBox.close = () => {
  189. instance.doClose();
  190. instance.visible = false;
  191. msgQueue = [];
  192. currentMsg = null;
  193. };
  194. export default MessageBox;
  195. export { MessageBox };