feat:弹框

@@ -21,4 +21,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+/api/config.js
+
 package-lock.json

@@ -2,11 +2,13 @@ import dialogBox from '@/components/DialogBox/dialogBox.vue'
 import LbTable from '@/components/LbTable/lb-table.vue'
 import Theme from '@/components/Theme/theme.vue'
 import Popup from '@/components/Popup/index'
+import MessageBox from '@/components/MessageBox/index.js'
 export default {
   install: (Vue) => {
     Vue.component('dialogBox', dialogBox);
     Vue.component('lbTable', LbTable);
     Vue.component('Theme', Theme);
-    Vue.prototype.$popup = Popup.install
+    Vue.prototype.$popup = Popup.install;
+    Vue.prototype.$alertMes = MessageBox.alert;
   }
 }
\ No newline at end of file

+import MessageBox from './src/main.js';
+export default MessageBox;

+const defaults = {
+  title: null,
+  message: '',
+  type: '',
+  iconClass: '',
+  showInput: false,
+  showClose: true,
+  modalFade: true,
+  lockScroll: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  closeOnHashChange: true,
+  inputValue: null,
+  inputPlaceholder: '',
+  inputType: 'text',
+  inputPattern: null,
+  inputValidator: null,
+  inputErrorMessage: '',
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmButtonPosition: 'right',
+  confirmButtonHighlight: false,
+  cancelButtonHighlight: false,
+  confirmButtonText: '',
+  cancelButtonText: '',
+  confirmButtonClass: '',
+  cancelButtonClass: '',
+  customClass: '',
+  beforeClose: null,
+  dangerouslyUseHTMLString: false,
+  center: false,
+  roundButton: false,
+  distinguishCancelAndClose: false
+};
+
+import Vue from 'vue';
+import msgboxVue from './main.vue';
+import merge from 'element-ui/src/utils/merge';
+import { isVNode } from 'element-ui/src/utils/vdom';
+
+const MessageBoxConstructor = Vue.extend(msgboxVue);
+
+let currentMsg, instance;
+let msgQueue = [];
+
+const defaultCallback = action => {
+  if (currentMsg) {
+    let callback = currentMsg.callback;
+    if (typeof callback === 'function') {
+      if (instance.showInput) {
+        callback(instance.inputValue, action);
+      } else {
+        callback(action);
+      }
+    }
+    if (currentMsg.resolve) {
+      if (action === 'confirm') {
+        if (instance.showInput) {
+          currentMsg.resolve({ value: instance.inputValue, action });
+        } else {
+          currentMsg.resolve(action);
+        }
+      } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
+        currentMsg.reject(action);
+      }
+    }
+  }
+};
+
+const initInstance = () => {
+  instance = new MessageBoxConstructor({
+    el: document.createElement('div')
+  });
+
+  instance.callback = defaultCallback;
+};
+
+const showNextMsg = () => {
+  if (!instance) {
+    initInstance();
+  }
+  instance.action = '';
+
+  if (!instance.visible || instance.closeTimer) {
+    if (msgQueue.length > 0) {
+      currentMsg = msgQueue.shift();
+
+      let options = currentMsg.options;
+      for (let prop in options) {
+        if (options.hasOwnProperty(prop)) {
+          instance[prop] = options[prop];
+        }
+      }
+      if (options.callback === undefined) {
+        instance.callback = defaultCallback;
+      }
+
+      let oldCb = instance.callback;
+      instance.callback = (action, instance) => {
+        oldCb(action, instance);
+        showNextMsg();
+      };
+      if (isVNode(instance.message)) {
+        instance.$slots.default = [instance.message];
+        instance.message = null;
+      } else {
+        delete instance.$slots.default;
+      }
+      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
+        if (instance[prop] === undefined) {
+          instance[prop] = true;
+        }
+      });
+      document.body.appendChild(instance.$el);
+
+      Vue.nextTick(() => {
+        instance.visible = true;
+      });
+    }
+  }
+};
+
+const MessageBox = function(options, callback) {
+  if (Vue.prototype.$isServer) return;
+  if (typeof options === 'string' || isVNode(options)) {
+    options = {
+      message: options
+    };
+    if (typeof arguments[1] === 'string') {
+      options.title = arguments[1];
+    }
+  } else if (options.callback && !callback) {
+    callback = options.callback;
+  }
+
+  if (typeof Promise !== 'undefined') {
+    return new Promise((resolve, reject) => { // eslint-disable-line
+      msgQueue.push({
+        options: merge({}, defaults, MessageBox.defaults, options),
+        callback: callback,
+        resolve: resolve,
+        reject: reject
+      });
+
+      showNextMsg();
+    });
+  } else {
+    msgQueue.push({
+      options: merge({}, defaults, MessageBox.defaults, options),
+      callback: callback
+    });
+
+    showNextMsg();
+  }
+};
+
+MessageBox.setDefaults = defaults => {
+  MessageBox.defaults = defaults;
+};
+
+MessageBox.alert = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'alert',
+    closeOnPressEscape: false,
+    closeOnClickModal: false
+  }, options));
+};
+
+MessageBox.close = () => {
+  instance.doClose();
+  instance.visible = false;
+  msgQueue = [];
+  currentMsg = null;
+};
+
+export default MessageBox;
+export { MessageBox };

+<template>
+  <transition name="msgbox-fade">
+    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick" role="dialog"
+      aria-modal="true" :aria-label="title || 'dialog'">
+      <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
+        <div class="el-message-box__header" v-if="title !== null">
+          <div class="el-message-box__title">
+            <div :class="['el-message-box__status', icon]" v-if="icon && center">
+            </div>
+            <span>{{ title }}</span>
+          </div>
+          <button type="button" class="el-message-box__headerbtn" aria-label="Close" v-if="showClose"
+            @click="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')"
+            @keydown.enter="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')">
+            <i class="el-message-box__close el-icon-close"></i>
+          </button>
+        </div>
+        <div class="el-message-box__content">
+          <div class="el-message-box__message" v-if="message !== ''">
+            <slot>
+              <p>{{ message }}</p>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import Popup from 'element-ui/src/utils/popup';
+import Locale from 'element-ui/src/mixins/locale';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
+import { t } from 'element-ui/src/locale';
+import Dialog from 'element-ui/src/utils/aria-dialog';
+
+let messageBox;
+let typeMap = {
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  error: 'error'
+};
+
+export default {
+  mixins: [Popup, Locale],
+
+  props: {
+    modal: {
+      default: true
+    },
+    lockScroll: {
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      default: true
+    },
+    closeOnPressEscape: {
+      default: true
+    },
+    closeOnHashChange: {
+      default: true
+    },
+    center: {
+      default: false,
+      type: Boolean
+    },
+    roundButton: {
+      default: false,
+      type: Boolean
+    }
+  },
+
+  components: {
+    ElInput,
+    ElButton
+  },
+
+  computed: {
+    icon () {
+      const { type, iconClass } = this;
+      return iconClass || (type && typeMap[type] ? `el-icon-${typeMap[type]}` : '');
+    },
+
+    confirmButtonClasses () {
+      return `el-button--primary ${this.confirmButtonClass}`;
+    },
+    cancelButtonClasses () {
+      return `${this.cancelButtonClass}`;
+    }
+  },
+
+  methods: {
+    getSafeClose () {
+      const currentId = this.uid;
+      return () => {
+        this.$nextTick(() => {
+          if (currentId === this.uid) this.doClose();
+        });
+      };
+    },
+    doClose () {
+      if (!this.visible) return;
+      this.visible = false;
+      this._closing = true;
+
+      this.onClose && this.onClose();
+      messageBox.closeDialog(); // 解绑
+      if (this.lockScroll) {
+        setTimeout(this.restoreBodyStyle, 200);
+      }
+      this.opened = false;
+      this.doAfterClose();
+      setTimeout(() => {
+        if (this.action) this.callback(this.action, this);
+      });
+    },
+
+    handleWrapperClick () {
+      if (this.closeOnClickModal) {
+        this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');
+      }
+    },
+
+    handleInputEnter () {
+      if (this.inputType !== 'textarea') {
+        return this.handleAction('confirm');
+      }
+    },
+
+    handleAction (action) {
+      if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
+        return;
+      }
+      this.action = action;
+      if (typeof this.beforeClose === 'function') {
+        this.close = this.getSafeClose();
+        this.beforeClose(action, this, this.close);
+      } else {
+        this.doClose();
+      }
+    },
+
+    validate () {
+      if (this.$type === 'prompt') {
+        const inputPattern = this.inputPattern;
+        if (inputPattern && !inputPattern.test(this.inputValue || '')) {
+          this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
+          addClass(this.getInputElement(), 'invalid');
+          return false;
+        }
+        const inputValidator = this.inputValidator;
+        if (typeof inputValidator === 'function') {
+          const validateResult = inputValidator(this.inputValue);
+          if (validateResult === false) {
+            this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
+            addClass(this.getInputElement(), 'invalid');
+            return false;
+          }
+          if (typeof validateResult === 'string') {
+            this.editorErrorMessage = validateResult;
+            addClass(this.getInputElement(), 'invalid');
+            return false;
+          }
+        }
+      }
+      this.editorErrorMessage = '';
+      removeClass(this.getInputElement(), 'invalid');
+      return true;
+    },
+    getFirstFocus () {
+      const btn = this.$el.querySelector('.el-message-box__btns .el-button');
+      const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
+      return btn || title;
+    },
+    getInputElement () {
+      const inputRefs = this.$refs.input.$refs;
+      return inputRefs.input || inputRefs.textarea;
+    },
+    handleClose () {
+      this.handleAction('close');
+    }
+  },
+
+  watch: {
+    inputValue: {
+      immediate: true,
+      handler (val) {
+        this.$nextTick(_ => {
+          if (this.$type === 'prompt' && val !== null) {
+            this.validate();
+          }
+        });
+      }
+    },
+
+    visible (val) {
+      if (val) {
+        this.uid++;
+        if (this.$type === 'alert' || this.$type === 'confirm') {
+          this.$nextTick(() => {
+            this.$refs.confirm.$el.focus();
+          });
+        }
+        this.focusAfterClosed = document.activeElement;
+        messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFirstFocus());
+      }
+
+      // prompt
+      if (this.$type !== 'prompt') return;
+      if (val) {
+        setTimeout(() => {
+          if (this.$refs.input && this.$refs.input.$el) {
+            this.getInputElement().focus();
+          }
+        }, 500);
+      } else {
+        this.editorErrorMessage = '';
+        removeClass(this.getInputElement(), 'invalid');
+      }
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      if (this.closeOnHashChange) {
+        window.addEventListener('hashchange', this.close);
+      }
+    });
+  },
+
+  beforeDestroy () {
+    if (this.closeOnHashChange) {
+      window.removeEventListener('hashchange', this.close);
+    }
+    setTimeout(() => {
+      messageBox.closeDialog();
+    });
+  },
+
+  data () {
+    return {
+      uid: 1,
+      title: undefined,
+      message: '',
+      type: '',
+      iconClass: '',
+      customClass: '',
+      showInput: false,
+      inputValue: null,
+      inputPlaceholder: '',
+      inputType: 'text',
+      inputPattern: null,
+      inputValidator: null,
+      inputErrorMessage: '',
+      showConfirmButton: true,
+      showCancelButton: false,
+      action: '',
+      confirmButtonText: '',
+      cancelButtonText: '',
+      confirmButtonLoading: false,
+      cancelButtonLoading: false,
+      confirmButtonClass: '',
+      confirmButtonDisabled: false,
+      cancelButtonClass: '',
+      editorErrorMessage: null,
+      callback: null,
+      dangerouslyUseHTMLString: false,
+      focusAfterClosed: null,
+      isOnComposition: false,
+      distinguishCancelAndClose: false
+    };
+  }
+};
+</script>