From 76d514914dd9adaeb80f1157fa55276a12bf5b12 Mon Sep 17 00:00:00 2001
From: wuls <linsheng.wu@beantechs.com>
Date: Sat, 19 Dec 2020 20:35:14 +0800
Subject: [PATCH 1/5] =?UTF-8?q?refactor(messageBox):=20=E9=87=8D=E6=9E=84m?=
 =?UTF-8?q?essagebox=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84title=E5=92=8C?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/MessageBoxvue.spec.js           | 135 +++++
 .../packages/message-box/src/MessageBox.js    |   3 +-
 .../packages/message-box/src/MessageBox.vue   | 419 +++------------
 .../packages/message-box/src/MessageBox6.vue  | 492 ++++++++++++++++++
 packages/element3/src/use/popup.js            |   9 +-
 5 files changed, 704 insertions(+), 354 deletions(-)
 create mode 100644 packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
 create mode 100644 packages/element3/packages/message-box/src/MessageBox6.vue

diff --git a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
new file mode 100644
index 000000000..d5a726e5a
--- /dev/null
+++ b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
@@ -0,0 +1,135 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import MessageBox from '../src/MessageBox.vue'
+describe('MessageBox.vue', () => {
+  describe('proprety', () => {
+    it('proprety title', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: 'chushihua'
+        }
+      })
+      expect(warpper.find('.el-message-box__title').text()).toBe('chushihua')
+    })
+    it('proprety center', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          center: true
+        }
+      })
+      expect(warpper.find('.el-message-box--center').exists()).toBeTruthy()
+    })
+    it('proprety customClass', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          customClass: 'customClass'
+        }
+      })
+      expect(warpper.find('.customClass').exists()).toBeTruthy()
+    })
+    it('proprety iconClass', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          iconClass: 'iconClass'
+        }
+      })
+      expect(warpper.vm.icon).toBe('iconClass')
+    })
+    it('iconclass with center', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          iconClass: 'iconClass',
+          center: true,
+          title: 'title'
+        }
+      })
+      expect(warpper.find('.iconClass').exists()).toBeTruthy()
+    })
+    it('proprety type', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: 'title',
+          center: true
+        }
+      })
+      expect(warpper.find('.el-icon-info').exists()).toBeTruthy()
+    })
+    it('showClose', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          showClose: false
+        }
+      })
+      expect(warpper.find('.el-message-box__headerbtn').exists()).toBeFalsy()
+    })
+    it('showClose toBeTruthy', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12'
+        }
+      })
+      expect(warpper.find('.el-message-box__headerbtn').exists()).toBeTruthy()
+    })
+    it('proprety beforeClose', async () => {
+      let object = {}
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          beforeClose: (action, instance, done) => {
+            object.action = action
+            object.instance = instance
+            object.done = done
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      expect(warpper.componentVM).toEqual(object.instance)
+      expect(object.action).toBe('cancel')
+    })
+    it('review messageBox when value was done', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          beforeClose: (action, instance, done) => {
+            done()
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      expect(warpper.find('.el-message-box__headerbtn').isVisible()).toBeFalsy()
+      expect(warpper.find('.v-modal').exists()).toBeFalsy()
+    })
+    it('showClose lockScroll', () => {
+      document.body.classList.remove('el-popup-parent--hidden')
+      mount(MessageBox, {
+        props: {
+          title: '12',
+          lockScroll: false
+        },
+        attachTo: document.getElementById('body')
+      })
+      expect(document.body.className).not.toBe('el-popup-parent--hidden')
+    })
+    it('meesage of normal', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          message: '333'
+        }
+      })
+      console.log()
+      expect(warpper.componentVM.getMessage.message).toBe('333')
+    })
+  })
+  describe('test modal', () => {
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index cdf0afc8c..275f53b4e 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -67,7 +67,6 @@ const defaultCallback = (action) => {
     }
   }
 }
-
 const initInstance = (currentMsg, VNode = null) => {
   defaults.callback = defaultCallback
   instance = createComponent(messageBoxConstructor, currentMsg.options, VNode)
@@ -102,6 +101,7 @@ const showNextMsg = () => {
         options[prop] = true
       }
     })
+
     document.body.appendChild(instance.vnode.el)
   }
   // }
@@ -156,6 +156,7 @@ MessageBox.alert = (message, title, options) => {
     merge(
       {
         title: title,
+        modal: true,
         message: message,
         _type: 'alert',
         closeOnPressEscape: false,
diff --git a/packages/element3/packages/message-box/src/MessageBox.vue b/packages/element3/packages/message-box/src/MessageBox.vue
index 4aaf4409a..b6564b075 100644
--- a/packages/element3/packages/message-box/src/MessageBox.vue
+++ b/packages/element3/packages/message-box/src/MessageBox.vue
@@ -1,12 +1,11 @@
 <template>
   <transition name="msgbox-fade">
     <div
+      v-show="state.visible"
       class="el-message-box__wrapper"
       tabindex="-1"
-      v-show="state.visible"
       role="dialog"
       aria-modal="true"
-      @click.self="handleWrapperClick"
       :aria-label="title || 'dialog'"
     >
       <div
@@ -26,12 +25,8 @@
             class="el-message-box__headerbtn"
             aria-label="Close"
             v-if="showClose"
-            @click="
-              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
-            "
-            @keydown.enter="
-              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
-            "
+            @click="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')"
           >
             <i class="el-message-box__close el-icon-close"></i>
           </button>
@@ -40,18 +35,21 @@
           <div class="el-message-box__container">
             <div
               :class="['el-message-box__status', icon]"
-              v-if="icon && !center && changedMessage !== ''"
+              v-if="icon && !center && getMessage.message !== ''"
             ></div>
-            <div class="el-message-box__message" v-if="changedMessage !== ''">
+            <div
+              class="el-message-box__message"
+              v-if="getMessage.message !== ''"
+            >
               <slot>
-                <p v-if="!dangerouslyUseHTMLString && state.isVnode !== true">
-                  {{ changedMessage }}
+                <p v-if="getMessage.isVnode !== true">
+                  {{ getMessage.message }}
                 </p>
-                <p v-else v-html="changedMessage"></p>
+                <p v-else v-html="getMessage.message"></p>
               </slot>
             </div>
           </div>
-          <div class="el-message-box__input" v-show="showInput">
+          <!-- <div class="el-message-box__input" v-show="showInput">
             <el-input
               @keydown.enter="handleInputEnter"
               :type="inputType"
@@ -67,33 +65,7 @@
             >
               {{ state.editorErrorMessage }}
             </div>
-          </div>
-        </div>
-
-        <div class="el-message-box__btns">
-          <el-button
-            :loading="cancelButtonLoading"
-            :class="[cancelButtonClasses]"
-            v-if="showCancelButton"
-            :round="roundButton"
-            size="small"
-            @click="handleAction('cancel')"
-            @keydown.enter="handleAction('cancel')"
-          >
-            {{ cancelButtonText || t('el.messagebox.cancel') }}
-          </el-button>
-          <el-button
-            :loading="confirmButtonLoading"
-            ref="confirm"
-            :class="[confirmButtonClasses]"
-            v-show="showConfirmButton"
-            :round="roundButton"
-            size="small"
-            @click="handleAction('confirm')"
-            @keydown.enter="handleAction('confirm')"
-          >
-            {{ confirmButtonText || t('el.messagebox.confirm') }}
-          </el-button>
+          </div> -->
         </div>
       </div>
     </div>
@@ -102,391 +74,142 @@
 
 <script type="text/babel">
 import {
+  defineComponent,
   reactive,
   isVNode,
   toRefs,
   getCurrentInstance,
   nextTick,
   unref,
+  render,
   computed,
   onMounted,
   onUnmounted,
-  render,
   ref,
   watch
 } from 'vue'
+import { isFunction } from '@vue/shared'
 import { popupProps, usePopup } from '../../../src/use/popup'
 import Locale from '../../../src/mixins/locale'
 import ElInput from '../../input'
 import ElButton from '../../button'
 import { addClass, removeClass } from '../../../src/utils/dom'
 import { t } from '../../../src/locale'
-import Dialog from '../../../src/utils/aria-dialog'
-
-// let messageBox
-const typeMap = {
-  success: 'success',
-  info: 'info',
-  warning: 'warning',
-  error: 'error'
-}
 
-export default {
+export default defineComponent({
   mixins: [Locale],
 
   props: {
-    ...popupProps,
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    title: {
-      type: String,
-      default: null
-    },
     message: {
       type: [Object, String],
       default() {
         return {}
       }
     },
-    dangerouslyUseHTMLString: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'info',
-      validator(val) {
-        return ['success', 'warning', 'info', 'error'].indexOf(val)
-      }
-    },
-    iconClass: {
-      type: String,
-      default: null
-    },
-    customClass: {
-      type: String,
-      default: null
-    },
-    callback: {
-      type: Function,
-      default: () => {}
-    },
-    showClose: {
+    lockScroll: {
       type: Boolean,
       default: true
     },
-    beforeClose: {
-      type: Function,
-      default: () => {}
-    },
-    distinguishCancelAndClose: {
+    modalAppendToBody: {
       type: Boolean,
       default: false
     },
-    lockScroll: {
+    modal: {
       type: Boolean,
       default: true
     },
-    showCancelButton: {
+    center: {
       type: Boolean,
       default: false
     },
-    showConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    cancelButtonClass: {
+    title: {
       type: String,
       default: null
     },
-    confirmButtonClass: {
+    customClass: {
       type: String,
       default: null
     },
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-    closeOnHashChange: {
-      type: Boolean,
-      default: true
-    },
-    showInput: {
-      type: Boolean,
-      default: false
-    },
-    inputPlaceholder: {
-      type: String,
-      default: ''
-    },
-    inputType: {
+    type: {
       type: String,
-      default: 'text'
+      default: 'info',
+      validator(val) {
+        return ['success', 'warning', 'info', 'error'].indexOf(val)
+      }
     },
-    inputValue: {
+    iconClass: {
       type: String,
-      default: ''
-    },
-    inputPattern: {
-      type: RegExp,
       default: null
     },
-    inputValidator: {
-      type: Function,
-      default: () => {}
-    },
-    inputErrorMessage: {
-      type: String,
-      default: ''
-    },
-    center: {
-      type: Boolean,
-      default: false
-    },
-    roundButton: {
+    showClose: {
       type: Boolean,
-      default: false
-    },
-    _type: {
-      type: String,
-      default: ''
+      default: true
     },
-    cancelButtonLoading: {
-      type: Boolean,
-      default: false
+    beforeClose: {
+      type: Function,
+      default: () => {}
     }
   },
 
   components: {
-    ElInput,
-    ElButton
+    // ElInput,
+    // ElButton
   },
-  setup(props, { attrs }) {
-    const confirmButtonText = ref(attrs.confirmButtonText || '确认')
-    const cancelButtonText = ref(attrs.cancelButtonText || '取消')
-
-    let messageBox = ''
-    const instance = getCurrentInstance()
-    const {
-      closeOnClickModal,
-      distinguishCancelAndClose,
-      _type,
-      beforeClose,
-      callback,
-      type,
-      iconClass,
-      message,
-      inputType,
-      cancelButtonClass,
-      confirmButtonClass,
-      closeOnHashChange,
-      lockScroll,
-      inputPattern,
-      inputValidator,
-      inputValue
-    } = toRefs(props)
+  emits: ['update:visible'],
+  setup(props, { attrs, emit }) {
     const state = reactive({
-      visible: false,
       action: null,
-      editorErrorMessage: null,
-      uid: 0,
-      inputValue: unref(inputValue),
-      isVnode: false
+      visible: true
     })
-    const { rendered, open, close, restoreBodyStyle } = usePopup({
-      ...toRefs(props),
-      visible: state.visible
+    const instance = getCurrentInstance()
+    const { iconClass, type, beforeClose } = toRefs(props)
+    const { open, close } = usePopup(
+      reactive({
+        visible: state.visible,
+        ...toRefs(props)
+      })
+    )
+    const icon = computed(() => {
+      return unref(iconClass) || (unref(type) ? `el-icon-${unref(type)}` : '')
     })
-    const validate = () => {
-      if (unref(_type) === 'prompt') {
-        const _inputPattern = unref(inputPattern)
-        if (_inputPattern && !_inputPattern.test(state.inputValue || '')) {
-          state.editorErrorMessage =
-            state.inputErrorMessage || t('el.messagebox.error')
-          addClass(getInputElement(), 'invalid')
-          return false
-        }
-        const _inputValidator = unref(inputValidator)
-        if (typeof _inputValidator === 'function') {
-          const validateResult = _inputValidator(state.inputValue)
-          if (validateResult === false) {
-            state.editorErrorMessage =
-              state.inputErrorMessage || t('el.messagebox.error')
-            addClass(getInputElement(), 'invalid')
-            return false
-          }
-          if (typeof validateResult === 'string') {
-            state.editorErrorMessage = validateResult
-            addClass(getInputElement(), 'invalid')
-            return false
-          }
-        }
-      }
-      state.editorErrorMessage = ''
-      removeClass(getInputElement(), 'invalid')
-      return true
-    }
-    const doClose = () => {
-      if (!state.visible) return
+    const closeHandle = () => {
       state.visible = false
-      rendered.value = false
       close()
-      messageBox.closeDialog() // 解绑
-      if (lockScroll) {
-        setTimeout(restoreBodyStyle, 200)
-      }
-      nextTick(() => {
-        if (state.action) {
-          unref(callback)(state.action, instance.vnode)
-        }
-      })
     }
-    const getSafeClose = () => {
-      const currentId = state.uid
-      return () => {
-        nextTick(() => {
-          if (currentId === state.uid) doClose()
-        })
-      }
-    }
-    const confirmButtonLoading = ref(false)
     const handleAction = (action) => {
-      if (unref(_type) === 'prompt' && action === 'confirm' && !validate()) {
-        return
-      }
-      state.action = action
-      if (typeof unref(beforeClose) === 'function') {
-        const close = getSafeClose()
-        unref(beforeClose)(action, instance.vnode, close)
+      if (isFunction(beforeClose.value)) {
+        beforeClose.value(action, instance.proxy, closeHandle)
       } else {
-        doClose()
-      }
-    }
-    const handleWrapperClick = () => {
-      if (unref(closeOnClickModal)) {
-        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+        closeHandle()
       }
     }
-    const handleKeyup = (element = {}) => {
-      if (element.code !== 'Escape') return
-      if (unref(props.closeOnPressEscape)) {
-        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
-      }
-    }
-    const handleInputEnter = () => {
-      if (unref(inputType) !== 'textarea') {
-        return handleAction('confirm')
-      }
-    }
-    const icon = computed(() => {
-      return (
-        unref(iconClass) ||
-        (unref(type) && typeMap[unref(type)]
-          ? `el-icon-${typeMap[unref(type)]}`
-          : '')
-      )
-    })
-    const cancelButtonClasses = computed(() => {
-      return `el-button--primary ${unref(cancelButtonClass)}`
-    })
-    const confirmButtonClasses = computed(() => {
-      return `el-button--primary ${unref(confirmButtonClass)}`
-    })
-    const getFirstFocus = () => {
-      const btn = instance.vnode.el.querySelector(
-        '.el-message-box__btns .el-button'
-      )
-      const title = instance.vnode.el.querySelector(
-        '.el-message-box__btns .el-message-box__title'
-      )
-      return btn || title
-    }
-    const getInputElement = () => {
-      const inputRefs = instance.refs.input.$refs
-      return inputRefs.input || inputRefs.textarea
+    const getMessage = (message) => {
+      return isVNode(message)
+        ? {
+            message: getHTMLInner(message),
+            isVNode: true
+          }
+        : {
+            message: message,
+            isVNode: false
+          }
     }
     onMounted(() => {
-      state.visible = true
       nextTick(() => {
-        state.uid++
-        rendered.value = true
         open()
       })
-      if (unref(_type) === 'alert' || unref(_type) === 'confirm') {
-        nextTick(() => {
-          instance.refs.confirm.$el.focus()
-        })
-      }
-      const focusAfterClosed = document.activeElement
-      messageBox = new Dialog(
-        instance.vnode.el,
-        focusAfterClosed,
-        getFirstFocus()
-      )
-      if (unref(closeOnHashChange)) {
-        window.addEventListener('hashchange', doClose)
-      }
-      window.addEventListener('keyup', handleKeyup)
-      if (unref(_type) !== 'prompt') return
-      setTimeout(() => {
-        if (instance.refs.input && instance.refs.input.$el) {
-          getInputElement().focus()
-        }
-      }, 500)
     })
-    onUnmounted(() => {
-      if (unref(closeOnHashChange)) {
-        window.removeEventListener('hashchange', doClose)
-      }
-      window.removeEventListener('keyup', handleKeyup)
-      setTimeout(() => {
-        messageBox.closeDialog()
-      })
-    })
-
-    const MessageToVNode = (message) => {
-      let v = ''
-      if (isVNode(unref(message))) {
-        v = unref(message)
-        render(v, document.createElement('div'))
-        state.isVnode = true
-        return v.el.innerHTML
-      } else {
-        state.isVnode = false
-        return message
-      }
-    }
-    watch(
-      () => state.inputValue,
-      (val) => {
-        nextTick(() => {
-          if (unref(_type) === 'prompt' && val !== null) {
-            validate()
-          }
-        })
-      }
-    )
     return {
-      ...toRefs(props),
-      changedMessage: MessageToVNode(message),
-      handleInputEnter,
-      handleAction,
       state,
-      handleWrapperClick,
       icon,
-      cancelButtonClasses,
-      cancelButtonText,
-      t,
-      confirmButtonLoading,
-      confirmButtonClasses,
-      confirmButtonText
+      handleAction,
+      getMessage: getMessage(props.message)
+    }
+    function getHTMLInner(vnode) {
+      let element = vnode
+      render(element, document.createElement('div'))
+      return element.el.innerHTML
     }
   }
-}
+})
 </script>
diff --git a/packages/element3/packages/message-box/src/MessageBox6.vue b/packages/element3/packages/message-box/src/MessageBox6.vue
new file mode 100644
index 000000000..ca1331554
--- /dev/null
+++ b/packages/element3/packages/message-box/src/MessageBox6.vue
@@ -0,0 +1,492 @@
+<template>
+  <transition name="msgbox-fade">
+    <div
+      class="el-message-box__wrapper"
+      tabindex="-1"
+      v-show="state.visible"
+      role="dialog"
+      aria-modal="true"
+      @click.self="handleWrapperClick"
+      :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__container">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && !center && changedMessage !== ''"
+            ></div>
+            <div class="el-message-box__message" v-if="changedMessage !== ''">
+              <slot>
+                <p v-if="!dangerouslyUseHTMLString && state.isVnode !== true">
+                  {{ changedMessage }}
+                </p>
+                <p v-else v-html="changedMessage"></p>
+              </slot>
+            </div>
+          </div>
+          <div class="el-message-box__input" v-show="showInput">
+            <el-input
+              @keydown.enter="handleInputEnter"
+              :type="inputType"
+              v-model="state.inputValue"
+              :placeholder="inputPlaceholder"
+              ref="input"
+            ></el-input>
+            <div
+              class="el-message-box__errormsg"
+              :style="{
+                visibility: !!state.editorErrorMessage ? 'visible' : 'hidden'
+              }"
+            >
+              {{ state.editorErrorMessage }}
+            </div>
+          </div>
+        </div>
+
+        <div class="el-message-box__btns">
+          <el-button
+            :loading="cancelButtonLoading"
+            :class="[cancelButtonClasses]"
+            v-if="showCancelButton"
+            :round="roundButton"
+            size="small"
+            @click="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')"
+          >
+            {{ cancelButtonText || t('el.messagebox.cancel') }}
+          </el-button>
+          <el-button
+            :loading="confirmButtonLoading"
+            ref="confirm"
+            :class="[confirmButtonClasses]"
+            v-show="showConfirmButton"
+            :round="roundButton"
+            size="small"
+            @click="handleAction('confirm')"
+            @keydown.enter="handleAction('confirm')"
+          >
+            {{ confirmButtonText || t('el.messagebox.confirm') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import {
+  reactive,
+  isVNode,
+  toRefs,
+  getCurrentInstance,
+  nextTick,
+  unref,
+  computed,
+  onMounted,
+  onUnmounted,
+  render,
+  ref,
+  watch
+} from 'vue'
+import { popupProps, usePopup } from '../../../src/use/popup'
+import Locale from '../../../src/mixins/locale'
+import ElInput from '../../input'
+import ElButton from '../../button'
+import { addClass, removeClass } from '../../../src/utils/dom'
+import { t } from '../../../src/locale'
+import Dialog from '../../../src/utils/aria-dialog'
+
+// let messageBox
+const typeMap = {
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  error: 'error'
+}
+
+export default {
+  mixins: [Locale],
+
+  props: {
+    ...popupProps,
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    message: {
+      type: [Object, String],
+      default() {
+        return {}
+      }
+    },
+    dangerouslyUseHTMLString: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator(val) {
+        return ['success', 'warning', 'info', 'error'].indexOf(val)
+      }
+    },
+    iconClass: {
+      type: String,
+      default: null
+    },
+    customClass: {
+      type: String,
+      default: null
+    },
+    callback: {
+      type: Function,
+      default: () => {}
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    beforeClose: {
+      type: Function,
+      default: () => {}
+    },
+    distinguishCancelAndClose: {
+      type: Boolean,
+      default: false
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: false
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    cancelButtonClass: {
+      type: String,
+      default: null
+    },
+    confirmButtonClass: {
+      type: String,
+      default: null
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    closeOnHashChange: {
+      type: Boolean,
+      default: true
+    },
+    showInput: {
+      type: Boolean,
+      default: false
+    },
+    inputPlaceholder: {
+      type: String,
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    inputValue: {
+      type: String,
+      default: ''
+    },
+    inputPattern: {
+      type: RegExp,
+      default: null
+    },
+    inputValidator: {
+      type: Function,
+      default: () => {}
+    },
+    inputErrorMessage: {
+      type: String,
+      default: ''
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    roundButton: {
+      type: Boolean,
+      default: false
+    },
+    _type: {
+      type: String,
+      default: ''
+    },
+    cancelButtonLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  components: {
+    ElInput,
+    ElButton
+  },
+  setup(props, { attrs }) {
+    const confirmButtonText = ref(attrs.confirmButtonText || '确认')
+    const cancelButtonText = ref(attrs.cancelButtonText || '取消')
+
+    let messageBox = ''
+    const instance = getCurrentInstance()
+    const {
+      closeOnClickModal,
+      distinguishCancelAndClose,
+      _type,
+      beforeClose,
+      callback,
+      type,
+      iconClass,
+      message,
+      inputType,
+      cancelButtonClass,
+      confirmButtonClass,
+      closeOnHashChange,
+      lockScroll,
+      inputPattern,
+      inputValidator,
+      inputValue
+    } = toRefs(props)
+    const state = reactive({
+      visible: false,
+      action: null,
+      editorErrorMessage: null,
+      uid: 0,
+      inputValue: unref(inputValue),
+      isVnode: false
+    })
+    const { rendered, open, close, restoreBodyStyle } = usePopup({
+      ...toRefs(props),
+      visible: state.visible
+    })
+    const validate = () => {
+      if (unref(_type) === 'prompt') {
+        const _inputPattern = unref(inputPattern)
+        if (_inputPattern && !_inputPattern.test(state.inputValue || '')) {
+          state.editorErrorMessage =
+            state.inputErrorMessage || t('el.messagebox.error')
+          addClass(getInputElement(), 'invalid')
+          return false
+        }
+        const _inputValidator = unref(inputValidator)
+        if (typeof _inputValidator === 'function') {
+          const validateResult = _inputValidator(state.inputValue)
+          if (validateResult === false) {
+            state.editorErrorMessage =
+              state.inputErrorMessage || t('el.messagebox.error')
+            addClass(getInputElement(), 'invalid')
+            return false
+          }
+          if (typeof validateResult === 'string') {
+            state.editorErrorMessage = validateResult
+            addClass(getInputElement(), 'invalid')
+            return false
+          }
+        }
+      }
+      state.editorErrorMessage = ''
+      removeClass(getInputElement(), 'invalid')
+      return true
+    }
+    const doClose = () => {
+      if (!state.visible) return
+      state.visible = false
+      rendered.value = false
+      close()
+      // messageBox.closeDialog() // 解绑
+      if (lockScroll) {
+        setTimeout(restoreBodyStyle, 200)
+      }
+      nextTick(() => {
+        if (state.action) {
+          unref(callback)(state.action, instance.vnode)
+        }
+      })
+    }
+    const getSafeClose = () => {
+      const currentId = state.uid
+      return () => {
+        nextTick(() => {
+          if (currentId === state.uid) doClose()
+        })
+      }
+    }
+    const confirmButtonLoading = ref(false)
+    const handleAction = (action) => {
+      if (unref(_type) === 'prompt' && action === 'confirm' && !validate()) {
+        return
+      }
+      state.action = action
+      if (typeof unref(beforeClose) === 'function') {
+        const close = getSafeClose()
+        unref(beforeClose)(action, instance.vnode, close)
+      } else {
+        doClose()
+      }
+    }
+    const handleWrapperClick = () => {
+      if (unref(closeOnClickModal)) {
+        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+      }
+    }
+    const handleKeyup = (element = {}) => {
+      if (element.code !== 'Escape') return
+      if (unref(props.closeOnPressEscape)) {
+        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+      }
+    }
+    const handleInputEnter = () => {
+      if (unref(inputType) !== 'textarea') {
+        return handleAction('confirm')
+      }
+    }
+    const icon = computed(() => {
+      return (
+        unref(iconClass) ||
+        (unref(type) && typeMap[unref(type)]
+          ? `el-icon-${typeMap[unref(type)]}`
+          : '')
+      )
+    })
+    const cancelButtonClasses = computed(() => {
+      return `el-button--primary ${unref(cancelButtonClass)}`
+    })
+    const confirmButtonClasses = computed(() => {
+      return `el-button--primary ${unref(confirmButtonClass)}`
+    })
+    const getFirstFocus = () => {
+      const btn = instance.vnode.el.querySelector(
+        '.el-message-box__btns .el-button'
+      )
+      const title = instance.vnode.el.querySelector(
+        '.el-message-box__btns .el-message-box__title'
+      )
+      return btn || title
+    }
+    const getInputElement = () => {
+      const inputRefs = instance.refs.input.$refs
+      return inputRefs.input || inputRefs.textarea
+    }
+    onMounted(() => {
+      state.visible = true
+      nextTick(() => {
+        state.uid++
+        rendered.value = true
+        open()
+      })
+      if (unref(_type) === 'alert' || unref(_type) === 'confirm') {
+        nextTick(() => {
+          instance.refs.confirm.$el.focus()
+        })
+      }
+      const focusAfterClosed = document.activeElement
+      messageBox = new Dialog(
+        instance.vnode.el,
+        focusAfterClosed,
+        getFirstFocus()
+      )
+      if (unref(closeOnHashChange)) {
+        window.addEventListener('hashchange', doClose)
+      }
+      window.addEventListener('keyup', handleKeyup)
+      if (unref(_type) !== 'prompt') return
+      setTimeout(() => {
+        if (instance.refs.input && instance.refs.input.$el) {
+          getInputElement().focus()
+        }
+      }, 500)
+    })
+    onUnmounted(() => {
+      if (unref(closeOnHashChange)) {
+        window.removeEventListener('hashchange', doClose)
+      }
+      window.removeEventListener('keyup', handleKeyup)
+      setTimeout(() => {
+        messageBox.closeDialog()
+      })
+    })
+
+    const MessageToVNode = (message) => {
+      let v = ''
+      if (isVNode(unref(message))) {
+        v = unref(message)
+        render(v, document.createElement('div'))
+        state.isVnode = true
+        return v.el.innerHTML
+      } else {
+        state.isVnode = false
+        return message
+      }
+    }
+    watch(
+      () => state.inputValue,
+      (val) => {
+        nextTick(() => {
+          if (unref(_type) === 'prompt' && val !== null) {
+            validate()
+          }
+        })
+      }
+    )
+    return {
+      ...toRefs(props),
+      changedMessage: MessageToVNode(message),
+      handleInputEnter,
+      handleAction,
+      state,
+      handleWrapperClick,
+      icon,
+      cancelButtonClasses,
+      cancelButtonText,
+      t,
+      confirmButtonLoading,
+      confirmButtonClasses,
+      confirmButtonText
+    }
+  }
+}
+</script>
diff --git a/packages/element3/src/use/popup.js b/packages/element3/src/use/popup.js
index 9a61447aa..2cec15413 100644
--- a/packages/element3/src/use/popup.js
+++ b/packages/element3/src/use/popup.js
@@ -9,7 +9,6 @@ import {
 } from 'vue'
 import PopupManager from '../../src/utils/popup/popup-manager'
 import getScrollBarWidth from '../../src/utils/scrollbar-width'
-import merge from '../../src/utils/merge'
 import { getStyle, addClass, removeClass, hasClass } from '../../src/utils/dom'
 
 let idSeed = 1
@@ -53,6 +52,7 @@ function usePopup(props) {
   const { visible, modal, modalAppendToBody, lockScroll, closeDelay } = toRefs(
     props
   )
+
   const opened = ref(false)
   const bodyPaddingRight = ref(null)
   const computedBodyPaddingRight = ref(0)
@@ -68,8 +68,7 @@ function usePopup(props) {
     if (!rendered.value) {
       rendered.value = true
     }
-
-    const props = merge({}, instance.ctx, options)
+    const props = Object.assign({}, instance.props, options)
 
     if (_closeTimer) {
       clearTimeout(_closeTimer)
@@ -87,11 +86,11 @@ function usePopup(props) {
     }
   }
   const doOpen = (props) => {
-    if (instance.ctx.$isServer) return
+    // if (instance.proxy.$isServer) return
     if (_opening) return
     if (opened.value) return
     _opening = true
-    const dom = instance.ctx.$el
+    const dom = instance.proxy.$el
     const modal = props.modal
     const zIndex = props.zIndex
 

From 2220e04d4138442ee959f6985ace030b099fa671 Mon Sep 17 00:00:00 2001
From: wuls <linsheng.wu@beantechs.com>
Date: Sun, 20 Dec 2020 17:19:29 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E6=99=9A=E4=B8=8AmessageBox?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/MessageBoxvue.spec.js           | 127 +++++++++-
 .../packages/message-box/src/MessageBox.js    |  76 +++---
 .../packages/message-box/src/MessageBox.vue   | 218 +++++++++++++++---
 3 files changed, 330 insertions(+), 91 deletions(-)

diff --git a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
index d5a726e5a..499c135d0 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+import { nextTick, h } from 'vue'
 import MessageBox from '../src/MessageBox.vue'
 describe('MessageBox.vue', () => {
   describe('proprety', () => {
@@ -117,19 +117,136 @@ describe('MessageBox.vue', () => {
           message: '333'
         }
       })
-      console.log()
-      expect(warpper.componentVM.getMessage.message).toBe('333')
+      expect(warpper.find('.el-message-box__message > p').text()).toBe('333')
+    })
+    it('meesage is VNode', () => {
+      const warpper = mount(MessageBox, {
+        slots: {
+          default: h('p', null, [
+            h('span', null, '内容可以是 '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        }
+      })
+
+      expect(warpper.find('.el-message-box__message > p').text()).toBe(
+        `内容可以是 VNode`
+      )
+    })
+    it('dangerouslyUseHTMLString', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          dangerouslyUseHTMLString: true,
+          message: '<div class="mmm">444</div>'
+        }
+      })
+      expect(warpper.find('.mmm').exists()).toBeTruthy()
+    })
+    it('showInput', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          showInput: true
+        }
+      })
+      expect(warpper.find('.el-message-box__input').isVisible()).toBeTruthy()
+    })
+    it('inputValue inputPlaceholder', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          showInput: true,
+          inputValue: '444',
+          inputPlaceholder: '555'
+        }
+      })
+      expect(warpper.find('.el-input__inner').element.value).toEqual('444')
+      expect(
+        warpper.find('.el-input__inner').attributes('placeholder')
+      ).toEqual('555')
+    })
+
+    it('cancelButtonText, showCancelButton', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          cancelButtonText: 'cancel',
+          showCancelButton: true,
+          cancelButtonClass: '4444'
+        }
+      })
+      expect(warpper.findAll('.el-message-box__btns button')[0].text()).toEqual(
+        'cancel'
+      )
+      expect(
+        warpper.findAll('.el-message-box__btns button')[0].isVisible()
+      ).toBeTruthy()
+      expect(
+        warpper.findAll('.el-button--primary')[0].element.classList
+      ).toContain('4444')
+    })
+
+    it('confirmButtonClass showConfirmButton, confirmButtonText', () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          confirmButtonText: 'cancel',
+          showConfirmButton: true,
+          confirmButtonClass: '4444'
+        }
+      })
+      expect(
+        warpper.findAll('.el-button--primary')[1].element.classList
+      ).toContain('4444')
+      expect(warpper.findAll('.el-message-box__btns button')[1].text()).toEqual(
+        'cancel'
+      )
+      expect(
+        warpper.findAll('.el-message-box__btns button')[1].isVisible()
+      ).toBeTruthy()
     })
   })
-  describe('test modal', () => {
+  describe('test modal closeOnClickModal', () => {
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true,
+          closeOnClickModal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('click')
+      setTimeout(() => {
+        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
+      }, 200)
+    })
+    it('open modal', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          modal: true,
+          closeOnClickModal: true
+        }
+      })
+      await nextTick()
+      expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('keyup', { keyCode: 'Escape' })
+      setTimeout(() => {
+        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
+      }, 200)
+    })
     it('open modal', async () => {
       const warpper = mount(MessageBox, {
         props: {
-          modal: true
+          modal: true,
+          closeOnClickModal: true
         }
       })
       await nextTick()
       expect(warpper.find('.v-modal').exists()).toBeTruthy()
+
+      await warpper.find('.v-modal').trigger('hashchange')
+      setTimeout(() => {
+        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
+      }, 200)
     })
   })
 })
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index 275f53b4e..add987057 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -1,9 +1,7 @@
 // #todo
-import { defineComponent, isVNode } from 'vue'
+import { isVNode } from 'vue'
 import { createComponent } from '../../../src/use/component'
 import msgboxVue from './MessageBox.vue'
-import merge from '../../../src/utils/merge'
-const messageBoxConstructor = defineComponent(msgboxVue)
 const defaults = {
   title: null,
   message: '',
@@ -39,10 +37,6 @@ const defaults = {
   distinguishCancelAndClose: false
 }
 
-// const MessageBoxConstructor = {
-//   extends: msgboxVue
-// }
-
 let currentMsg, instance
 let msgQueue = []
 
@@ -67,9 +61,10 @@ const defaultCallback = (action) => {
     }
   }
 }
+
 const initInstance = (currentMsg, VNode = null) => {
   defaults.callback = defaultCallback
-  instance = createComponent(messageBoxConstructor, currentMsg.options, VNode)
+  instance = createComponent(msgboxVue, currentMsg.options, VNode)
 }
 
 const showNextMsg = () => {
@@ -86,44 +81,27 @@ const showNextMsg = () => {
     options.callback = (action, instance) => {
       oldCb(action, instance)
     }
-    if (isVNode(currentMsg.message)) {
-      initInstance(currentMsg, { default: () => currentMsg.message })
-    }
     initInstance(currentMsg)
-    ;[
-      'modal',
-      'showClose',
-      'closeOnClickModal',
-      'closeOnPressEscape',
-      'closeOnHashChange'
-    ].forEach((prop) => {
-      if (options[prop] === undefined) {
-        options[prop] = true
-      }
-    })
-
+    if (isVNode(options.message)) {
+      console.log(options.message)
+      instance.slots.default = () => options.message
+      console.log(instance)
+      debugger
+    }
     document.body.appendChild(instance.vnode.el)
   }
-  // }
 }
 
-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) {
+const MessageBox = function (options) {
+  let callback = null
+  if (options.callback) {
     callback = options.callback
   }
 
   if (typeof Promise !== 'undefined') {
     return new Promise((resolve, reject) => { // eslint-disable-line
       msgQueue.push({
-        options: merge({}, defaults, MessageBox.defaults, options),
+        options: Object.assign({}, defaults, MessageBox.defaults, options),
         callback: callback,
         resolve: resolve,
         reject: reject
@@ -133,7 +111,7 @@ const MessageBox = function (options, callback) {
     })
   } else {
     msgQueue.push({
-      options: merge({}, defaults, MessageBox.defaults, options),
+      options: Object.assign({}, defaults, options),
       callback: callback
     })
 
@@ -141,10 +119,6 @@ const MessageBox = function (options, callback) {
   }
 }
 
-MessageBox.setDefaults = (defaults) => {
-  MessageBox.defaults = defaults
-}
-
 MessageBox.alert = (message, title, options) => {
   if (typeof title === 'object') {
     options = title
@@ -152,15 +126,16 @@ MessageBox.alert = (message, title, options) => {
   } else if (title === undefined) {
     title = ''
   }
+  if (typeof message === 'object') {
+    options = message
+    message = ''
+  }
   return MessageBox(
-    merge(
+    Object.assign(
       {
         title: title,
-        modal: true,
         message: message,
-        _type: 'alert',
-        closeOnPressEscape: false,
-        closeOnClickModal: false
+        category: 'alert'
       },
       options
     )
@@ -175,11 +150,11 @@ MessageBox.confirm = (message, title, options) => {
     title = ''
   }
   return MessageBox(
-    merge(
+    Object.assign(
       {
         title: title,
         message: message,
-        _type: 'confirm',
+        category: 'confirm',
         showCancelButton: true
       },
       options
@@ -194,14 +169,17 @@ MessageBox.prompt = (message, title, options) => {
   } else if (title === undefined) {
     title = ''
   }
+  if (typeof message === 'object') {
+    options = message
+  }
   return MessageBox(
-    merge(
+    Object.assign(
       {
         title: title,
         message: message,
         showCancelButton: true,
         showInput: true,
-        _type: 'prompt'
+        category: 'prompt'
       },
       options
     )
diff --git a/packages/element3/packages/message-box/src/MessageBox.vue b/packages/element3/packages/message-box/src/MessageBox.vue
index 288e063ca..1d4f2780b 100644
--- a/packages/element3/packages/message-box/src/MessageBox.vue
+++ b/packages/element3/packages/message-box/src/MessageBox.vue
@@ -6,6 +6,7 @@
       tabindex="-1"
       role="dialog"
       aria-modal="true"
+      @click.self="handleWrapperClick"
       :aria-label="title || 'dialog'"
     >
       <div
@@ -35,37 +36,61 @@
           <div class="el-message-box__container">
             <div
               :class="['el-message-box__status', icon]"
-              v-if="icon && !center && getMessage.message !== ''"
+              v-if="icon && !center && message !== ''"
             ></div>
-            <div
-              class="el-message-box__message"
-              v-if="getMessage.message !== ''"
-            >
+            <div class="el-message-box__message" v-if="message !== ''">
               <slot>
-                <p v-if="getMessage.isVnode !== true">
-                  {{ getMessage.message }}
+                <p v-if="!dangerouslyUseHTMLString">
+                  {{ message }}
                 </p>
-                <p v-else v-html="getMessage.message"></p>
+
+                <p v-else v-html="message"></p>
               </slot>
             </div>
           </div>
-          <!-- <div class="el-message-box__input" v-show="showInput">
+          <div class="el-message-box__input" v-show="showInput">
             <el-input
               @keydown.enter="handleInputEnter"
               :type="inputType"
-              v-model="state.inputValue"
+              v-model="modelValue"
               :placeholder="inputPlaceholder"
               ref="input"
             ></el-input>
-            <div
-              class="el-message-box__errormsg"
-              :style="{
+            <div class="el-message-box__errormsg">
+              <!-- :style="{
                 visibility: !!state.editorErrorMessage ? 'visible' : 'hidden'
-              }"
-            >
-              {{ state.editorErrorMessage }}
+              }" -->
+              {{ editorErrorMessage }}
             </div>
-          </div> -->
+          </div>
+        </div>
+        <div class="el-message-box__btns">
+          <el-button
+            :loading="cancelButtonLoading"
+            size="small"
+            :round="roundButton"
+            @click="
+              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
+            "
+            @keydown.enter="
+              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
+            "
+            :class="['el-button--primary', cancelButtonClass]"
+            v-show="showCancelButton"
+          >
+            {{ cancelButtonText }}
+          </el-button>
+          <el-button
+            :loading="cancelButtonLoading"
+            size="small"
+            :round="roundButton"
+            @click="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')"
+            :class="['el-button--primary', confirmButtonClass]"
+            v-show="showConfirmButton"
+          >
+            {{ confirmButtonText }}
+          </el-button>
         </div>
       </div>
     </div>
@@ -100,6 +125,81 @@ export default defineComponent({
   mixins: [Locale],
 
   props: {
+    closeOnHashChange: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    distinguishCancelAndClose: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+    cancelButtonLoading: {
+      type: Boolean,
+      default: false
+    },
+    roundButton: {
+      type: Boolean,
+      default: false
+    },
+    cancelButtonClass: {
+      type: String,
+      default: null
+    },
+    confirmButtonClass: {
+      type: String,
+      default: null
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: false
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: false
+    },
+    confirmButtonText: {
+      type: String,
+      default: () => t('el.messagebox.cancel')
+    },
+    cancelButtonText: {
+      type: String,
+      default: () => t('el.messagebox.confirm')
+    },
+    category: {
+      type: String,
+      default: 'alert',
+      validator(val) {
+        return ['confirm', 'prompt', 'alert'].indexOf(val)
+      }
+    },
+    inputValue: {
+      type: String,
+      default: ''
+    },
+    inputPlaceholder: {
+      type: String,
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    showInput: {
+      type: Boolean,
+      default: false
+    },
+    dangerouslyUseHTMLString: {
+      type: Boolean,
+      default: false
+    },
     message: {
       type: [Object, String],
       default() {
@@ -147,13 +247,13 @@ export default defineComponent({
     },
     beforeClose: {
       type: Function,
-      default: () => {}
+      default: null
     }
   },
 
   components: {
-    // ElInput,
-    // ElButton
+    ElInput,
+    ElButton
   },
   emits: ['update:visible'],
   setup(props, { attrs, emit }) {
@@ -162,7 +262,18 @@ export default defineComponent({
       visible: true
     })
     const instance = getCurrentInstance()
-    const { iconClass, type, beforeClose } = toRefs(props)
+    const {
+      iconClass,
+      type,
+      beforeClose,
+      inputType,
+      inputValue,
+      category,
+      closeOnClickModal,
+      distinguishCancelAndClose,
+      closeOnPressEscape,
+      closeOnHashChange
+    } = toRefs(props)
     const { open, close } = usePopup(
       reactive({
         visible: state.visible,
@@ -183,32 +294,65 @@ export default defineComponent({
         closeHandle()
       }
     }
-    const getMessage = (message) => {
-      return isVNode(message)
-        ? {
-            message: getHTMLInner(message),
-            isVNode: true
-          }
-        : {
-            message: message,
-            isVNode: false
-          }
+    const handleInputEnter = () => {
+      if (unref(inputType) !== 'textarea') {
+        return handleAction('confirm')
+      }
+    }
+    const handleKeyup = (element = {}) => {
+      if (element.code !== 'Escape') return
+      if (unref(closeOnPressEscape)) {
+        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+      }
     }
     onMounted(() => {
+      if (unref(closeOnHashChange)) {
+        window.addEventListener('hashchange', closeHandle)
+      }
+      window.addEventListener('keyup', handleKeyup)
       nextTick(() => {
         open()
       })
     })
+    onUnmounted(() => {
+      if (unref(closeOnHashChange)) {
+        window.removeEventListener('hashchange', closeHandle)
+      }
+      window.removeEventListener('keyup', handleKeyup)
+    })
+
+    const modelValue = ref(inputValue)
+    const editorErrorMessage = ref(null)
+    const getInputElement = () => {
+      const inputRefs = instance.refs.input.$refs
+      return inputRefs.input || inputRefs.textarea
+    }
+    const validate = () => {
+      state.editorErrorMessage = ''
+      removeClass(getInputElement(), 'invalid')
+      return true
+    }
+    watch(modelValue, (val) => {
+      nextTick(() => {
+        if (unref(category) === 'prompt' && val !== null) {
+          validate()
+        }
+      })
+    })
+
+    const handleWrapperClick = () => {
+      if (unref(closeOnClickModal)) {
+        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+      }
+    }
     return {
+      modelValue,
       state,
       icon,
       handleAction,
-      getMessage: getMessage(props.message)
-    }
-    function getHTMLInner(vnode) {
-      let element = vnode
-      render(element, document.createElement('div'))
-      return element.el.innerHTML
+      handleInputEnter,
+      editorErrorMessage,
+      handleWrapperClick
     }
   }
 })

From 39b5ad39ff470523a7e0880cd99dcee1167038c6 Mon Sep 17 00:00:00 2001
From: wuls <linsheng.wu@beantechs.com>
Date: Mon, 21 Dec 2020 17:26:00 +0800
Subject: [PATCH 3/5] refactor(MessageBox): abstract prop

---
 .../message-box/__tests__/MessageBox.spec.js  |  33 ++-
 .../__tests__/MessageBoxvue.spec.js           |  67 +++---
 .../message-box/__tests__/Prop.spec.js        |   8 +
 .../packages/message-box/src/MessageBox.js    |  55 +----
 .../packages/message-box/src/MessageBox.vue   | 193 ++++--------------
 .../packages/message-box/src/prop/prop.js     | 163 +++++++++++++++
 packages/element3/src/use/popup.js            |   5 +-
 7 files changed, 290 insertions(+), 234 deletions(-)
 create mode 100644 packages/element3/packages/message-box/__tests__/Prop.spec.js
 create mode 100644 packages/element3/packages/message-box/src/prop/prop.js

diff --git a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
index da4d87b75..f75f467aa 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
@@ -1,3 +1,32 @@
-describe('MessageBox.vue', () => {
-  test('todo', () => {})
+// import { mount } from '@vue/test-utils'
+import messageBox from '../src/MessageBox.js'
+const selector = '.el-message-box__wrapper'
+const sleep = (time = 0) => new Promise((resolve) => setTimeout(resolve, time))
+describe('MessageBox.js', () => {
+  afterEach(() => {
+    const el = document.querySelector('.el-message-box__wrapper')
+    if (!el) return
+    if (el.parentNode) {
+      el.parentNode.removeChild(el)
+    }
+    messageBox.close()
+  })
+  test('alert', async () => {
+    messageBox.alert({
+      type: 'warning',
+      title: '消息',
+      message: '这是一段内容'
+    })
+    const msgbox = document.querySelector(selector)
+    expect(
+      msgbox.querySelector('.el-message-box__title span').textContent
+    ).toEqual('消息')
+    expect(
+      msgbox.querySelector('.el-message-box__message').querySelector('p')
+        .textContent
+    ).toEqual('这是一段内容')
+    messageBox.close()
+    await sleep(50)
+    expect(msgbox.style.display).toEqual('none')
+  })
 })
diff --git a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
index 499c135d0..f77d25ae9 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
@@ -1,11 +1,11 @@
 import { mount } from '@vue/test-utils'
-import { nextTick, h } from 'vue'
+import { nextTick, h, ref } from 'vue'
 import MessageBox from '../src/MessageBox.vue'
 describe('MessageBox.vue', () => {
   describe('proprety', () => {
     it('proprety title', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: 'chushihua'
         }
       })
@@ -13,7 +13,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety center', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           center: true
         }
       })
@@ -21,7 +21,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety customClass', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           customClass: 'customClass'
         }
       })
@@ -29,7 +29,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety iconClass', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           iconClass: 'iconClass'
         }
       })
@@ -37,7 +37,7 @@ describe('MessageBox.vue', () => {
     })
     it('iconclass with center', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           iconClass: 'iconClass',
           center: true,
           title: 'title'
@@ -47,16 +47,17 @@ describe('MessageBox.vue', () => {
     })
     it('proprety type', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: 'title',
           center: true
         }
       })
+
       expect(warpper.find('.el-icon-info').exists()).toBeTruthy()
     })
     it('showClose', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: '12',
           showClose: false
         }
@@ -65,7 +66,7 @@ describe('MessageBox.vue', () => {
     })
     it('showClose toBeTruthy', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: '12'
         }
       })
@@ -74,7 +75,7 @@ describe('MessageBox.vue', () => {
     it('proprety beforeClose', async () => {
       let object = {}
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: '12',
           beforeClose: (action, instance, done) => {
             object.action = action
@@ -89,7 +90,7 @@ describe('MessageBox.vue', () => {
     })
     it('review messageBox when value was done', async () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           title: '12',
           beforeClose: (action, instance, done) => {
             done()
@@ -103,7 +104,7 @@ describe('MessageBox.vue', () => {
     it('showClose lockScroll', () => {
       document.body.classList.remove('el-popup-parent--hidden')
       mount(MessageBox, {
-        props: {
+        attrs: {
           title: '12',
           lockScroll: false
         },
@@ -113,7 +114,7 @@ describe('MessageBox.vue', () => {
     })
     it('meesage of normal', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           message: '333'
         }
       })
@@ -135,7 +136,7 @@ describe('MessageBox.vue', () => {
     })
     it('dangerouslyUseHTMLString', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           dangerouslyUseHTMLString: true,
           message: '<div class="mmm">444</div>'
         }
@@ -144,7 +145,7 @@ describe('MessageBox.vue', () => {
     })
     it('showInput', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           showInput: true
         }
       })
@@ -152,7 +153,7 @@ describe('MessageBox.vue', () => {
     })
     it('inputValue inputPlaceholder', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           showInput: true,
           inputValue: '444',
           inputPlaceholder: '555'
@@ -166,7 +167,7 @@ describe('MessageBox.vue', () => {
 
     it('cancelButtonText, showCancelButton', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           cancelButtonText: 'cancel',
           showCancelButton: true,
           cancelButtonClass: '4444'
@@ -185,7 +186,7 @@ describe('MessageBox.vue', () => {
 
     it('confirmButtonClass showConfirmButton, confirmButtonText', () => {
       const warpper = mount(MessageBox, {
-        props: {
+        attrs: {
           confirmButtonText: 'cancel',
           showConfirmButton: true,
           confirmButtonClass: '4444'
@@ -201,6 +202,21 @@ describe('MessageBox.vue', () => {
         warpper.findAll('.el-message-box__btns button')[1].isVisible()
       ).toBeTruthy()
     })
+
+    it('proprety callback', async () => {
+      let object = ref(null)
+      const warpper = mount(MessageBox, {
+        attrs: {
+          title: '12',
+          callback(action) {
+            object.value = action
+          }
+        }
+      })
+      await warpper.find('.el-message-box__headerbtn').trigger('click')
+      await nextTick()
+      expect(object.value).toBe('cancel')
+    })
   })
   describe('test modal closeOnClickModal', () => {
     it('open modal', async () => {
@@ -214,9 +230,8 @@ describe('MessageBox.vue', () => {
       expect(warpper.find('.v-modal').exists()).toBeTruthy()
 
       await warpper.find('.v-modal').trigger('click')
-      setTimeout(() => {
-        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
-      }, 200)
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
     })
     it('open modal', async () => {
       const warpper = mount(MessageBox, {
@@ -229,9 +244,8 @@ describe('MessageBox.vue', () => {
       expect(warpper.find('.v-modal').exists()).toBeTruthy()
 
       await warpper.find('.v-modal').trigger('keyup', { keyCode: 'Escape' })
-      setTimeout(() => {
-        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
-      }, 200)
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
     })
     it('open modal', async () => {
       const warpper = mount(MessageBox, {
@@ -244,9 +258,8 @@ describe('MessageBox.vue', () => {
       expect(warpper.find('.v-modal').exists()).toBeTruthy()
 
       await warpper.find('.v-modal').trigger('hashchange')
-      setTimeout(() => {
-        expect(warpper.find('.el-message-box__wrapper').exists()).toBeFalsy()
-      }, 200)
+      await nextTick()
+      expect(warpper.find('.v-moda').exists()).toBeFalsy()
     })
   })
 })
diff --git a/packages/element3/packages/message-box/__tests__/Prop.spec.js b/packages/element3/packages/message-box/__tests__/Prop.spec.js
new file mode 100644
index 000000000..2695124d5
--- /dev/null
+++ b/packages/element3/packages/message-box/__tests__/Prop.spec.js
@@ -0,0 +1,8 @@
+import porps from '../src/prop/prop'
+describe('porps', () => {
+  test('props', () => {
+    let o = { title: '23232', type: 'info' }
+    const b = Object.assign(porps, o)
+    expect(b.title).toBe('23232')
+  })
+})
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index add987057..a792e5681 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -2,40 +2,8 @@
 import { isVNode } from 'vue'
 import { createComponent } from '../../../src/use/component'
 import msgboxVue from './MessageBox.vue'
-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 propsList from './prop/prop'
+const defaults = propsList
 
 let currentMsg, instance
 let msgQueue = []
@@ -44,9 +12,9 @@ const defaultCallback = (action) => {
   if (currentMsg) {
     if (currentMsg.resolve) {
       if (action === 'confirm') {
-        if (instance.vnode.props.showInput) {
+        if (instance.proxy.showInput) {
           currentMsg.resolve({
-            value: instance.setupState.state.inputValue,
+            value: instance.proxy.modelValue,
             action
           })
         } else {
@@ -70,7 +38,7 @@ const initInstance = (currentMsg, VNode = null) => {
 const showNextMsg = () => {
   if (msgQueue.length > 0) {
     currentMsg = msgQueue.shift()
-
+    // initInstance(currentMsg)
     const options = currentMsg.options
 
     if (options.callback === undefined) {
@@ -81,13 +49,8 @@ const showNextMsg = () => {
     options.callback = (action, instance) => {
       oldCb(action, instance)
     }
-    initInstance(currentMsg)
-    if (isVNode(options.message)) {
-      console.log(options.message)
-      instance.slots.default = () => options.message
-      console.log(instance)
-      debugger
-    }
+
+    initInstance(currentMsg, isVNode(options.message) ? options.message : null)
     document.body.appendChild(instance.vnode.el)
   }
 }
@@ -101,7 +64,7 @@ const MessageBox = function (options) {
   if (typeof Promise !== 'undefined') {
     return new Promise((resolve, reject) => { // eslint-disable-line
       msgQueue.push({
-        options: Object.assign({}, defaults, MessageBox.defaults, options),
+        options: Object.assign({}, defaults, options),
         callback: callback,
         resolve: resolve,
         reject: reject
@@ -187,7 +150,7 @@ MessageBox.prompt = (message, title, options) => {
 }
 
 MessageBox.close = () => {
-  instance.doClose()
+  instance.proxy.closeHandle()
   msgQueue = []
   currentMsg = null
 }
diff --git a/packages/element3/packages/message-box/src/MessageBox.vue b/packages/element3/packages/message-box/src/MessageBox.vue
index 1d4f2780b..ad0002b04 100644
--- a/packages/element3/packages/message-box/src/MessageBox.vue
+++ b/packages/element3/packages/message-box/src/MessageBox.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="msgbox-fade">
     <div
-      v-show="state.visible"
+      v-show="visible"
       class="el-message-box__wrapper"
       tabindex="-1"
       role="dialog"
@@ -26,8 +26,12 @@
             class="el-message-box__headerbtn"
             aria-label="Close"
             v-if="showClose"
-            @click="handleAction('cancel')"
-            @keydown.enter="handleAction('cancel')"
+            @click="
+              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
+            "
+            @keydown.enter="
+              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
+            "
           >
             <i class="el-message-box__close el-icon-close"></i>
           </button>
@@ -69,23 +73,19 @@
             :loading="cancelButtonLoading"
             size="small"
             :round="roundButton"
-            @click="
-              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
-            "
-            @keydown.enter="
-              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')
-            "
+            @click="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')"
             :class="['el-button--primary', cancelButtonClass]"
             v-show="showCancelButton"
           >
             {{ cancelButtonText }}
           </el-button>
           <el-button
-            :loading="cancelButtonLoading"
+            :loading="confirmButtonLoading"
             size="small"
             :round="roundButton"
-            @click="handleAction('cancel')"
-            @keydown.enter="handleAction('cancel')"
+            @click="handleAction('confirm')"
+            @keydown.enter="handleAction('confirm')"
             :class="['el-button--primary', confirmButtonClass]"
             v-show="showConfirmButton"
           >
@@ -101,165 +101,38 @@
 import {
   defineComponent,
   reactive,
-  isVNode,
   toRefs,
   getCurrentInstance,
   nextTick,
   unref,
-  render,
   computed,
   onMounted,
   onUnmounted,
   ref,
   watch
 } from 'vue'
+import propsObject from './prop/prop'
 import { isFunction } from '@vue/shared'
 import { popupProps, usePopup } from '../../../src/use/popup'
 import Locale from '../../../src/mixins/locale'
 import ElInput from '../../input'
 import { ElButton } from '../../../src/components/Button'
 import { addClass, removeClass } from '../../../src/utils/dom'
-import { t } from '../../../src/locale'
 
 export default defineComponent({
   mixins: [Locale],
 
-  props: {
-    closeOnHashChange: {
-      type: Boolean,
-      default: true
-    },
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-    distinguishCancelAndClose: {
-      type: Boolean,
-      default: false
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-    cancelButtonLoading: {
-      type: Boolean,
-      default: false
-    },
-    roundButton: {
-      type: Boolean,
-      default: false
-    },
-    cancelButtonClass: {
-      type: String,
-      default: null
-    },
-    confirmButtonClass: {
-      type: String,
-      default: null
-    },
-    showCancelButton: {
-      type: Boolean,
-      default: false
-    },
-    showConfirmButton: {
-      type: Boolean,
-      default: false
-    },
-    confirmButtonText: {
-      type: String,
-      default: () => t('el.messagebox.cancel')
-    },
-    cancelButtonText: {
-      type: String,
-      default: () => t('el.messagebox.confirm')
-    },
-    category: {
-      type: String,
-      default: 'alert',
-      validator(val) {
-        return ['confirm', 'prompt', 'alert'].indexOf(val)
-      }
-    },
-    inputValue: {
-      type: String,
-      default: ''
-    },
-    inputPlaceholder: {
-      type: String,
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    showInput: {
-      type: Boolean,
-      default: false
-    },
-    dangerouslyUseHTMLString: {
-      type: Boolean,
-      default: false
-    },
-    message: {
-      type: [Object, String],
-      default() {
-        return {}
-      }
-    },
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-    modalAppendToBody: {
-      type: Boolean,
-      default: false
-    },
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    center: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: null
-    },
-    customClass: {
-      type: String,
-      default: null
-    },
-    type: {
-      type: String,
-      default: 'info',
-      validator(val) {
-        return ['success', 'warning', 'info', 'error'].indexOf(val)
-      }
-    },
-    iconClass: {
-      type: String,
-      default: null
-    },
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    beforeClose: {
-      type: Function,
-      default: null
-    }
-  },
-
   components: {
     ElInput,
     ElButton
   },
-  emits: ['update:visible'],
-  setup(props, { attrs, emit }) {
+  setup(props, { attrs }) {
+    const b = Object.assign(propsObject(), attrs)
+    console.log(b)
     const state = reactive({
       action: null,
-      visible: true
+      visible: true,
+      ...b
     })
     const instance = getCurrentInstance()
     const {
@@ -272,22 +145,27 @@ export default defineComponent({
       closeOnClickModal,
       distinguishCancelAndClose,
       closeOnPressEscape,
-      closeOnHashChange
-    } = toRefs(props)
-    const { open, close } = usePopup(
-      reactive({
-        visible: state.visible,
-        ...toRefs(props)
-      })
-    )
+      closeOnHashChange,
+      callback
+    } = toRefs(state)
+
+    const { open, close } = usePopup(state)
     const icon = computed(() => {
+      console.log('type', iconClass.value)
       return unref(iconClass) || (unref(type) ? `el-icon-${unref(type)}` : '')
     })
     const closeHandle = () => {
       state.visible = false
       close()
+      nextTick(() => {
+        unref(callback)(state.action, instance)
+      })
     }
     const handleAction = (action) => {
+      if (unref(category) === 'prompt' && action === 'confirm' && !validate()) {
+        return
+      }
+      state.action = action
       if (isFunction(beforeClose.value)) {
         beforeClose.value(action, instance.proxy, closeHandle)
       } else {
@@ -321,7 +199,7 @@ export default defineComponent({
       window.removeEventListener('keyup', handleKeyup)
     })
 
-    const modelValue = ref(inputValue)
+    const modelValue = ref(inputValue.value)
     const editorErrorMessage = ref(null)
     const getInputElement = () => {
       const inputRefs = instance.refs.input.$refs
@@ -345,14 +223,17 @@ export default defineComponent({
         handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
       }
     }
+    const confirmButtonLoading = ref(false)
     return {
       modelValue,
-      state,
+      ...toRefs(state),
       icon,
       handleAction,
       handleInputEnter,
       editorErrorMessage,
-      handleWrapperClick
+      handleWrapperClick,
+      closeHandle,
+      confirmButtonLoading
     }
   }
 })
diff --git a/packages/element3/packages/message-box/src/prop/prop.js b/packages/element3/packages/message-box/src/prop/prop.js
new file mode 100644
index 000000000..a4294d7c2
--- /dev/null
+++ b/packages/element3/packages/message-box/src/prop/prop.js
@@ -0,0 +1,163 @@
+import { t } from '../../../../src/locale'
+const props = () => ({
+  inputPattern: {
+    type: RegExp,
+    default: null
+  },
+  inputValidator: {
+    type: Function,
+    default: () => {}
+  },
+  inputErrorMessage: {
+    type: String,
+    default: ''
+  },
+  modalFade: {
+    type: Boolean,
+    default: true
+  },
+  callback: {
+    type: Function,
+    default: () => {}
+  },
+  closeOnHashChange: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  distinguishCancelAndClose: {
+    type: Boolean,
+    default: false
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  cancelButtonLoading: {
+    type: Boolean,
+    default: false
+  },
+  roundButton: {
+    type: Boolean,
+    default: false
+  },
+  cancelButtonClass: {
+    type: String,
+    default: null
+  },
+  confirmButtonClass: {
+    type: String,
+    default: null
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: false
+  },
+  showConfirmButton: {
+    type: Boolean,
+    default: true
+  },
+  confirmButtonText: {
+    type: String,
+    default: () => t('el.messagebox.cancel')
+  },
+  cancelButtonText: {
+    type: String,
+    default: () => t('el.messagebox.confirm')
+  },
+  category: {
+    type: String,
+    default: 'alert',
+    validator(val) {
+      return ['confirm', 'prompt', 'alert'].indexOf(val)
+    }
+  },
+  inputValue: {
+    type: String,
+    default: ''
+  },
+  inputPlaceholder: {
+    type: String,
+    default: ''
+  },
+  inputType: {
+    type: String,
+    default: 'text'
+  },
+  showInput: {
+    type: Boolean,
+    default: false
+  },
+  dangerouslyUseHTMLString: {
+    type: Boolean,
+    default: false
+  },
+  message: {
+    type: [Object, String],
+    default() {
+      return {}
+    }
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  modalAppendToBody: {
+    type: Boolean,
+    default: false
+  },
+  modal: {
+    type: Boolean,
+    default: true
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: null
+  },
+  customClass: {
+    type: String,
+    default: null
+  },
+  type: {
+    type: String,
+    default: 'info',
+    validator(val) {
+      return ['success', 'warning', 'info', 'error'].indexOf(val)
+    }
+  },
+  iconClass: {
+    type: String,
+    default: null
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  beforeClose: {
+    type: Function,
+    default: null
+  }
+})
+export default () =>
+  new Proxy(props(), {
+    get: function (target, propKey) {
+      return target[propKey]['default']
+    },
+    set: function (target, propKey, value) {
+      if (
+        target[propKey]['validator'] &&
+        target[propKey]['validator'](value) < 0
+      ) {
+        return false
+      }
+      target[propKey]['default'] = value
+      return true
+    }
+  })
diff --git a/packages/element3/src/use/popup.js b/packages/element3/src/use/popup.js
index 2cec15413..597ad262e 100644
--- a/packages/element3/src/use/popup.js
+++ b/packages/element3/src/use/popup.js
@@ -68,8 +68,7 @@ function usePopup(props) {
     if (!rendered.value) {
       rendered.value = true
     }
-    const props = Object.assign({}, instance.props, options)
-
+    const props = Object.assign({}, instance.proxy, options)
     if (_closeTimer) {
       clearTimeout(_closeTimer)
       _closeTimer = 0
@@ -105,7 +104,7 @@ function usePopup(props) {
       PopupManager.openModal(
         _popupId,
         PopupManager.nextZIndex(),
-        modalAppendToBody.value ? undefined : dom,
+        modalAppendToBody?.value ? undefined : dom,
         props.modalClass,
         props.modalFade
       )

From 34aff80224e45727380ef9c552c3938f04ad2c4e Mon Sep 17 00:00:00 2001
From: wuls <linsheng.wu@beantechs.com>
Date: Thu, 24 Dec 2020 17:49:34 +0800
Subject: [PATCH 4/5] refactor(messageBox): add many category

---
 .../message-box/__tests__/MessageBox.spec.js  | 68 +++++++++++++++++--
 .../__tests__/MessageBoxvue.spec.js           | 50 +++++++++-----
 .../packages/message-box/src/MessageBox.js    | 35 ++++++----
 .../packages/message-box/src/MessageBox.vue   | 62 ++++++++++++-----
 .../packages/message-box/src/prop/prop.js     | 23 ++-----
 packages/element3/src/use/popup.js            |  4 +-
 6 files changed, 168 insertions(+), 74 deletions(-)

diff --git a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
index f75f467aa..88ec6dcff 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
@@ -1,7 +1,8 @@
 // import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import messageBox from '../src/MessageBox.js'
-const selector = '.el-message-box__wrapper'
 const sleep = (time = 0) => new Promise((resolve) => setTimeout(resolve, time))
+const selector = '.el-message-box__wrapper'
 describe('MessageBox.js', () => {
   afterEach(() => {
     const el = document.querySelector('.el-message-box__wrapper')
@@ -13,7 +14,6 @@ describe('MessageBox.js', () => {
   })
   test('alert', async () => {
     messageBox.alert({
-      type: 'warning',
       title: '消息',
       message: '这是一段内容'
     })
@@ -25,8 +25,66 @@ describe('MessageBox.js', () => {
       msgbox.querySelector('.el-message-box__message').querySelector('p')
         .textContent
     ).toEqual('这是一段内容')
-    messageBox.close()
-    await sleep(50)
-    expect(msgbox.style.display).toEqual('none')
+  })
+  test('messageBox of message is html', async () => {
+    let instanceProprety = ''
+    const callback = jest.fn((action, instance) => {
+      instanceProprety = instance
+    })
+    const { instance } = messageBox.alert(
+      `<strong>这是 <i>HTML</i> 片段</strong>`,
+      `html片段`,
+      {
+        dangerouslyUseHTMLString: true,
+        callback
+      }
+    )
+    expect(instance.proxy.message).toBe(
+      '<strong>这是 <i>HTML</i> 片段</strong>'
+    )
+    expect(
+      document.querySelector('.el-message-box__message').textContent
+    ).toContain('HTML')
+    expect(instance.proxy.title).toBe('html片段')
+    expect(instance.proxy.dangerouslyUseHTMLString).toBeTruthy()
+    instance.proxy.closeHandle()
+    await nextTick()
+    expect(instanceProprety.message).toBeTruthy()
+    expect(callback).toHaveBeenCalled()
+  })
+  test('alert', async () => {
+    messageBox.confirm({
+      type: 'warning',
+      title: '消息',
+      message: '这是一段内容'
+    })
+    const msgbox = document.querySelector(selector)
+    const calsslist = msgbox.querySelector('.el-message-box__status').classList
+    expect(calsslist.length).toEqual(2)
+    expect(calsslist.contains('el-icon-warning')).toBeTruthy()
+  })
+  test('kind of prompt', async () => {
+    let v = ''
+    // const callback = jest.fn(({ value }) => {
+    //   v = value
+    // })
+    messageBox
+      .prompt('请输入邮箱', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'mmm',
+        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+        inputErrorMessage: '邮箱格式不正确'
+      })
+      .then(({ action }) => {
+        v = action
+      })
+    await sleep()
+    const btn = document.querySelector('.mmm')
+    btn.click()
+    await sleep()
+    console.log('>>>>', v)
+    // await nextTick()
+    // expect(callback).toHaveBeenCalled()
   })
 })
diff --git a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
index f77d25ae9..b1fa1c4cb 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBoxvue.spec.js
@@ -5,7 +5,7 @@ describe('MessageBox.vue', () => {
   describe('proprety', () => {
     it('proprety title', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: 'chushihua'
         }
       })
@@ -13,7 +13,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety center', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           center: true
         }
       })
@@ -21,7 +21,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety customClass', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           customClass: 'customClass'
         }
       })
@@ -29,7 +29,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety iconClass', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           iconClass: 'iconClass'
         }
       })
@@ -37,7 +37,7 @@ describe('MessageBox.vue', () => {
     })
     it('iconclass with center', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           iconClass: 'iconClass',
           center: true,
           title: 'title'
@@ -47,7 +47,7 @@ describe('MessageBox.vue', () => {
     })
     it('proprety type', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: 'title',
           center: true
         }
@@ -57,7 +57,7 @@ describe('MessageBox.vue', () => {
     })
     it('showClose', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12',
           showClose: false
         }
@@ -66,7 +66,7 @@ describe('MessageBox.vue', () => {
     })
     it('showClose toBeTruthy', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12'
         }
       })
@@ -75,7 +75,7 @@ describe('MessageBox.vue', () => {
     it('proprety beforeClose', async () => {
       let object = {}
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12',
           beforeClose: (action, instance, done) => {
             object.action = action
@@ -90,7 +90,7 @@ describe('MessageBox.vue', () => {
     })
     it('review messageBox when value was done', async () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12',
           beforeClose: (action, instance, done) => {
             done()
@@ -104,7 +104,7 @@ describe('MessageBox.vue', () => {
     it('showClose lockScroll', () => {
       document.body.classList.remove('el-popup-parent--hidden')
       mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12',
           lockScroll: false
         },
@@ -114,7 +114,7 @@ describe('MessageBox.vue', () => {
     })
     it('meesage of normal', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           message: '333'
         }
       })
@@ -136,7 +136,7 @@ describe('MessageBox.vue', () => {
     })
     it('dangerouslyUseHTMLString', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           dangerouslyUseHTMLString: true,
           message: '<div class="mmm">444</div>'
         }
@@ -145,7 +145,7 @@ describe('MessageBox.vue', () => {
     })
     it('showInput', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           showInput: true
         }
       })
@@ -153,7 +153,7 @@ describe('MessageBox.vue', () => {
     })
     it('inputValue inputPlaceholder', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           showInput: true,
           inputValue: '444',
           inputPlaceholder: '555'
@@ -167,7 +167,7 @@ describe('MessageBox.vue', () => {
 
     it('cancelButtonText, showCancelButton', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           cancelButtonText: 'cancel',
           showCancelButton: true,
           cancelButtonClass: '4444'
@@ -186,7 +186,7 @@ describe('MessageBox.vue', () => {
 
     it('confirmButtonClass showConfirmButton, confirmButtonText', () => {
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           confirmButtonText: 'cancel',
           showConfirmButton: true,
           confirmButtonClass: '4444'
@@ -206,7 +206,7 @@ describe('MessageBox.vue', () => {
     it('proprety callback', async () => {
       let object = ref(null)
       const warpper = mount(MessageBox, {
-        attrs: {
+        props: {
           title: '12',
           callback(action) {
             object.value = action
@@ -217,6 +217,20 @@ describe('MessageBox.vue', () => {
       await nextTick()
       expect(object.value).toBe('cancel')
     })
+    it('validate', async () => {
+      const warpper = mount(MessageBox, {
+        props: {
+          title: '12',
+          category: 'prompt',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
+        }
+      })
+      await warpper.findComponent({ ref: 'input' }).setValue('2323')
+      await nextTick()
+      expect(warpper.componentVM.editorErrorMessage).toBe('输入的数据不合法!')
+    })
   })
   describe('test modal closeOnClickModal', () => {
     it('open modal', async () => {
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index 280931376..e1f647962 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -2,8 +2,6 @@
 import { isVNode } from 'vue'
 import { createComponent } from '../../../src/use/component'
 import msgboxVue from './MessageBox.vue'
-import propsList from './prop/prop'
-const defaults = propsList
 
 let currentMsg, instance
 let msgQueue = []
@@ -14,31 +12,30 @@ const defaultCallback = (action) => {
       if (action === 'confirm') {
         if (instance.proxy.showInput) {
           currentMsg.resolve({
-            value: instance.proxy.modelValue,
+            value: instance.proxy.inputValue,
             action
           })
         } else {
-          currentMsg.resolve(action)
+          currentMsg.resolve({ action })
         }
       } else if (
         currentMsg.reject &&
         (action === 'cancel' || action === 'close')
       ) {
-        currentMsg.reject(action)
+        currentMsg.reject({ action })
       }
     }
   }
 }
 
 const initInstance = (currentMsg, VNode = null) => {
-  defaults.callback = defaultCallback
   instance = createComponent(msgboxVue, currentMsg.options, VNode)
+  MessageBox.instance = instance
 }
 
 const showNextMsg = () => {
   if (msgQueue.length > 0) {
     currentMsg = msgQueue.shift()
-    // initInstance(currentMsg)
     const options = currentMsg.options
 
     if (options.callback === undefined) {
@@ -62,24 +59,26 @@ const MessageBox = function (options) {
   }
 
   if (typeof Promise !== 'undefined') {
-    return new Promise((resolve, reject) => {
+    let promiseInstance = new Promise((resolve, reject) => {
       // eslint-disable-line
       msgQueue.push({
-        options: Object.assign({}, defaults, options),
+        options: options,
         callback: callback,
         resolve: resolve,
         reject: reject
       })
-
       showNextMsg()
     })
+    promiseInstance.instance = instance
+    return promiseInstance
   } else {
     msgQueue.push({
-      options: Object.assign({}, defaults, options),
+      options: options,
       callback: callback
     })
 
     showNextMsg()
+    return { instance }
   }
 }
 
@@ -97,9 +96,12 @@ MessageBox.alert = (message, title, options) => {
   return MessageBox(
     Object.assign(
       {
+        type: '',
         title: title,
         message: message,
-        category: 'alert'
+        category: 'alert',
+        confirmButtonText: '确认',
+        cancelButtonText: '取消'
       },
       options
     )
@@ -113,9 +115,14 @@ MessageBox.confirm = (message, title, options) => {
   } else if (title === undefined) {
     title = ''
   }
+  if (typeof message === 'object') {
+    options = message
+    message = ''
+  }
   return MessageBox(
     Object.assign(
       {
+        type: 'info',
         title: title,
         message: message,
         category: 'confirm',
@@ -139,11 +146,13 @@ MessageBox.prompt = (message, title, options) => {
   return MessageBox(
     Object.assign(
       {
+        type: '',
         title: title,
         message: message,
         showCancelButton: true,
         showInput: true,
-        category: 'prompt'
+        category: 'prompt',
+        inputErrorMessage: '输入的数据不合法!'
       },
       options
     )
diff --git a/packages/element3/packages/message-box/src/MessageBox.vue b/packages/element3/packages/message-box/src/MessageBox.vue
index ad0002b04..d03fa5216 100644
--- a/packages/element3/packages/message-box/src/MessageBox.vue
+++ b/packages/element3/packages/message-box/src/MessageBox.vue
@@ -56,14 +56,16 @@
             <el-input
               @keydown.enter="handleInputEnter"
               :type="inputType"
-              v-model="modelValue"
+              v-model="inputValue"
               :placeholder="inputPlaceholder"
               ref="input"
             ></el-input>
-            <div class="el-message-box__errormsg">
-              <!-- :style="{
-                visibility: !!state.editorErrorMessage ? 'visible' : 'hidden'
-              }" -->
+            <div
+              :style="{
+                visibility: !!editorErrorMessage ? 'visible' : 'hidden'
+              }"
+              class="el-message-box__errormsg"
+            >
               {{ editorErrorMessage }}
             </div>
           </div>
@@ -83,6 +85,7 @@
           <el-button
             :loading="confirmButtonLoading"
             size="small"
+            ref="confirm"
             :round="roundButton"
             @click="handleAction('confirm')"
             @keydown.enter="handleAction('confirm')"
@@ -113,7 +116,7 @@ import {
 } from 'vue'
 import propsObject from './prop/prop'
 import { isFunction } from '@vue/shared'
-import { popupProps, usePopup } from '../../../src/use/popup'
+import { usePopup } from '../../../src/use/popup'
 import Locale from '../../../src/mixins/locale'
 import ElInput from '../../input'
 import { ElButton } from '../../../src/components/Button'
@@ -121,18 +124,16 @@ import { addClass, removeClass } from '../../../src/utils/dom'
 
 export default defineComponent({
   mixins: [Locale],
-
+  props: propsObject,
   components: {
     ElInput,
     ElButton
   },
-  setup(props, { attrs }) {
-    const b = Object.assign(propsObject(), attrs)
-    console.log(b)
+  setup(props) {
     const state = reactive({
       action: null,
       visible: true,
-      ...b
+      ...props
     })
     const instance = getCurrentInstance()
     const {
@@ -146,19 +147,21 @@ export default defineComponent({
       distinguishCancelAndClose,
       closeOnPressEscape,
       closeOnHashChange,
-      callback
+      callback,
+      inputPattern,
+      inputErrorMessage,
+      inputValidator
     } = toRefs(state)
 
     const { open, close } = usePopup(state)
     const icon = computed(() => {
-      console.log('type', iconClass.value)
       return unref(iconClass) || (unref(type) ? `el-icon-${unref(type)}` : '')
     })
     const closeHandle = () => {
       state.visible = false
       close()
       nextTick(() => {
-        unref(callback)(state.action, instance)
+        unref(callback)(state.action, instance.proxy)
       })
     }
     const handleAction = (action) => {
@@ -199,18 +202,42 @@ export default defineComponent({
       window.removeEventListener('keyup', handleKeyup)
     })
 
-    const modelValue = ref(inputValue.value)
     const editorErrorMessage = ref(null)
     const getInputElement = () => {
       const inputRefs = instance.refs.input.$refs
       return inputRefs.input || inputRefs.textarea
     }
     const validate = () => {
-      state.editorErrorMessage = ''
+      if (unref(category) === 'prompt') {
+        if (
+          unref(inputPattern) &&
+          !unref(inputPattern).test(unref(inputValue))
+        ) {
+          editorErrorMessage.value = unref(inputErrorMessage)
+
+          addClass(getInputElement(), 'invalid')
+          return false
+        }
+        const _inputValidator = unref(inputValidator)
+        if (typeof _inputValidator === 'function') {
+          const validateResult = _inputValidator(unref(inputValue))
+          if (validateResult === false) {
+            editorErrorMessage.value = unref(inputErrorMessage)
+            addClass(getInputElement(), 'invalid')
+            return false
+          }
+          if (typeof validateResult === 'string') {
+            editorErrorMessage.value = validateResult
+            addClass(getInputElement(), 'invalid')
+            return false
+          }
+        }
+      }
+      editorErrorMessage.value = ''
       removeClass(getInputElement(), 'invalid')
       return true
     }
-    watch(modelValue, (val) => {
+    watch(inputValue, (val) => {
       nextTick(() => {
         if (unref(category) === 'prompt' && val !== null) {
           validate()
@@ -225,7 +252,6 @@ export default defineComponent({
     }
     const confirmButtonLoading = ref(false)
     return {
-      modelValue,
       ...toRefs(state),
       icon,
       handleAction,
diff --git a/packages/element3/packages/message-box/src/prop/prop.js b/packages/element3/packages/message-box/src/prop/prop.js
index a4294d7c2..01969a0e8 100644
--- a/packages/element3/packages/message-box/src/prop/prop.js
+++ b/packages/element3/packages/message-box/src/prop/prop.js
@@ -1,5 +1,5 @@
 import { t } from '../../../../src/locale'
-const props = () => ({
+const props = {
   inputPattern: {
     type: RegExp,
     default: null
@@ -10,7 +10,7 @@ const props = () => ({
   },
   inputErrorMessage: {
     type: String,
-    default: ''
+    default: () => t('el.messagebox.error')
   },
   modalFade: {
     type: Boolean,
@@ -144,20 +144,5 @@ const props = () => ({
     type: Function,
     default: null
   }
-})
-export default () =>
-  new Proxy(props(), {
-    get: function (target, propKey) {
-      return target[propKey]['default']
-    },
-    set: function (target, propKey, value) {
-      if (
-        target[propKey]['validator'] &&
-        target[propKey]['validator'](value) < 0
-      ) {
-        return false
-      }
-      target[propKey]['default'] = value
-      return true
-    }
-  })
+}
+export default props
diff --git a/packages/element3/src/use/popup.js b/packages/element3/src/use/popup.js
index 597ad262e..57c882ecb 100644
--- a/packages/element3/src/use/popup.js
+++ b/packages/element3/src/use/popup.js
@@ -7,6 +7,7 @@ import {
   watch,
   toRefs
 } from 'vue'
+import _ from 'lodash'
 import PopupManager from '../../src/utils/popup/popup-manager'
 import getScrollBarWidth from '../../src/utils/scrollbar-width'
 import { getStyle, addClass, removeClass, hasClass } from '../../src/utils/dom'
@@ -68,7 +69,8 @@ function usePopup(props) {
     if (!rendered.value) {
       rendered.value = true
     }
-    const props = Object.assign({}, instance.proxy, options)
+    // instance.proxy, options)
+    const props = _.merge(instance.proxy, options)
     if (_closeTimer) {
       clearTimeout(_closeTimer)
       _closeTimer = 0

From 685861979b7796385c03b991ab7430e4bf7b240d Mon Sep 17 00:00:00 2001
From: wuls <linsheng.wu@beantechs.com>
Date: Fri, 25 Dec 2020 07:58:12 +0800
Subject: [PATCH 5/5] refactor(messageBox): optimize code

---
 .../message-box/__tests__/MessageBox.spec.js  |  37 +-
 .../message-box/__tests__/Prop.spec.js        |  12 +-
 .../packages/message-box/src/MessageBox.js    |  80 +--
 .../packages/message-box/src/MessageBox6.vue  | 492 ------------------
 .../packages/message-box/src/prop/prop.js     |   9 +-
 .../examples/docs/zh-CN/message-box.md        |   2 +-
 6 files changed, 59 insertions(+), 573 deletions(-)
 delete mode 100644 packages/element3/packages/message-box/src/MessageBox6.vue

diff --git a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
index 88ec6dcff..ff633887c 100644
--- a/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
+++ b/packages/element3/packages/message-box/__tests__/MessageBox.spec.js
@@ -52,7 +52,7 @@ describe('MessageBox.js', () => {
     expect(instanceProprety.message).toBeTruthy()
     expect(callback).toHaveBeenCalled()
   })
-  test('alert', async () => {
+  test('confirm', async () => {
     messageBox.confirm({
       type: 'warning',
       title: '消息',
@@ -65,26 +65,23 @@ describe('MessageBox.js', () => {
   })
   test('kind of prompt', async () => {
     let v = ''
-    // const callback = jest.fn(({ value }) => {
-    //   v = value
-    // })
-    messageBox
-      .prompt('请输入邮箱', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        confirmButtonClass: 'mmm',
-        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-        inputErrorMessage: '邮箱格式不正确'
-      })
-      .then(({ action }) => {
-        v = action
-      })
-    await sleep()
+    const callback = jest.fn(({ value }) => {
+      v = value
+    })
+    const instance = messageBox.prompt('请输入邮箱', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      confirmButtonClass: 'mmm',
+      inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+      inputErrorMessage: '邮箱格式不正确'
+    })
+    instance.then(callback)
+    await nextTick()
     const btn = document.querySelector('.mmm')
-    btn.click()
+    instance.instance.proxy.inputValue = '409187100@qq.com'
+    await btn.click()
     await sleep()
-    console.log('>>>>', v)
-    // await nextTick()
-    // expect(callback).toHaveBeenCalled()
+    expect(callback).toHaveBeenCalled()
+    expect(v).toBeTruthy()
   })
 })
diff --git a/packages/element3/packages/message-box/__tests__/Prop.spec.js b/packages/element3/packages/message-box/__tests__/Prop.spec.js
index 2695124d5..d0f190707 100644
--- a/packages/element3/packages/message-box/__tests__/Prop.spec.js
+++ b/packages/element3/packages/message-box/__tests__/Prop.spec.js
@@ -1,8 +1,10 @@
-import porps from '../src/prop/prop'
+import props from '../src/prop/prop'
 describe('porps', () => {
-  test('props', () => {
-    let o = { title: '23232', type: 'info' }
-    const b = Object.assign(porps, o)
-    expect(b.title).toBe('23232')
+  test('type', () => {
+    expect(props.type.validator('success')).toBeTruthy()
+    expect(props.type.validator()).toBeFalsy()
+  })
+  test('category', () => {
+    expect(props.category.validator('alert')).toBeTruthy()
   })
 })
diff --git a/packages/element3/packages/message-box/src/MessageBox.js b/packages/element3/packages/message-box/src/MessageBox.js
index e1f647962..27fb9c63b 100644
--- a/packages/element3/packages/message-box/src/MessageBox.js
+++ b/packages/element3/packages/message-box/src/MessageBox.js
@@ -1,4 +1,3 @@
-// #todo
 import { isVNode } from 'vue'
 import { createComponent } from '../../../src/use/component'
 import msgboxVue from './MessageBox.vue'
@@ -82,7 +81,7 @@ const MessageBox = function (options) {
   }
 }
 
-MessageBox.alert = (message, title, options) => {
+const MergeCondition = (message, title, options) => {
   if (typeof title === 'object') {
     options = title
     title = ''
@@ -93,69 +92,46 @@ MessageBox.alert = (message, title, options) => {
     options = message
     message = ''
   }
+  return Object.assign(
+    {
+      title: title,
+      message: message,
+      confirmButtonText: '确认',
+      cancelButtonText: '取消'
+    },
+    options
+  )
+}
+
+MessageBox.alert = (message, title, options) => {
+  const defaultVal = {
+    type: null,
+    category: 'alert'
+  }
   return MessageBox(
-    Object.assign(
-      {
-        type: '',
-        title: title,
-        message: message,
-        category: 'alert',
-        confirmButtonText: '确认',
-        cancelButtonText: '取消'
-      },
-      options
-    )
+    Object.assign(defaultVal, MergeCondition(message, title, options))
   )
 }
 
 MessageBox.confirm = (message, title, options) => {
-  if (typeof title === 'object') {
-    options = title
-    title = ''
-  } else if (title === undefined) {
-    title = ''
-  }
-  if (typeof message === 'object') {
-    options = message
-    message = ''
+  const defaultVal = {
+    type: 'info',
+    category: 'confirm'
   }
   return MessageBox(
-    Object.assign(
-      {
-        type: 'info',
-        title: title,
-        message: message,
-        category: 'confirm',
-        showCancelButton: true
-      },
-      options
-    )
+    Object.assign(defaultVal, MergeCondition(message, title, options))
   )
 }
 
 MessageBox.prompt = (message, title, options) => {
-  if (typeof title === 'object') {
-    options = title
-    title = ''
-  } else if (title === undefined) {
-    title = ''
-  }
-  if (typeof message === 'object') {
-    options = message
+  const defaultVal = {
+    type: null,
+    showInput: true,
+    category: 'prompt',
+    inputErrorMessage: '输入的数据不合法!'
   }
   return MessageBox(
-    Object.assign(
-      {
-        type: '',
-        title: title,
-        message: message,
-        showCancelButton: true,
-        showInput: true,
-        category: 'prompt',
-        inputErrorMessage: '输入的数据不合法!'
-      },
-      options
-    )
+    Object.assign(defaultVal, MergeCondition(message, title, options))
   )
 }
 
diff --git a/packages/element3/packages/message-box/src/MessageBox6.vue b/packages/element3/packages/message-box/src/MessageBox6.vue
deleted file mode 100644
index ca1331554..000000000
--- a/packages/element3/packages/message-box/src/MessageBox6.vue
+++ /dev/null
@@ -1,492 +0,0 @@
-<template>
-  <transition name="msgbox-fade">
-    <div
-      class="el-message-box__wrapper"
-      tabindex="-1"
-      v-show="state.visible"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleWrapperClick"
-      :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__container">
-            <div
-              :class="['el-message-box__status', icon]"
-              v-if="icon && !center && changedMessage !== ''"
-            ></div>
-            <div class="el-message-box__message" v-if="changedMessage !== ''">
-              <slot>
-                <p v-if="!dangerouslyUseHTMLString && state.isVnode !== true">
-                  {{ changedMessage }}
-                </p>
-                <p v-else v-html="changedMessage"></p>
-              </slot>
-            </div>
-          </div>
-          <div class="el-message-box__input" v-show="showInput">
-            <el-input
-              @keydown.enter="handleInputEnter"
-              :type="inputType"
-              v-model="state.inputValue"
-              :placeholder="inputPlaceholder"
-              ref="input"
-            ></el-input>
-            <div
-              class="el-message-box__errormsg"
-              :style="{
-                visibility: !!state.editorErrorMessage ? 'visible' : 'hidden'
-              }"
-            >
-              {{ state.editorErrorMessage }}
-            </div>
-          </div>
-        </div>
-
-        <div class="el-message-box__btns">
-          <el-button
-            :loading="cancelButtonLoading"
-            :class="[cancelButtonClasses]"
-            v-if="showCancelButton"
-            :round="roundButton"
-            size="small"
-            @click="handleAction('cancel')"
-            @keydown.enter="handleAction('cancel')"
-          >
-            {{ cancelButtonText || t('el.messagebox.cancel') }}
-          </el-button>
-          <el-button
-            :loading="confirmButtonLoading"
-            ref="confirm"
-            :class="[confirmButtonClasses]"
-            v-show="showConfirmButton"
-            :round="roundButton"
-            size="small"
-            @click="handleAction('confirm')"
-            @keydown.enter="handleAction('confirm')"
-          >
-            {{ confirmButtonText || t('el.messagebox.confirm') }}
-          </el-button>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script type="text/babel">
-import {
-  reactive,
-  isVNode,
-  toRefs,
-  getCurrentInstance,
-  nextTick,
-  unref,
-  computed,
-  onMounted,
-  onUnmounted,
-  render,
-  ref,
-  watch
-} from 'vue'
-import { popupProps, usePopup } from '../../../src/use/popup'
-import Locale from '../../../src/mixins/locale'
-import ElInput from '../../input'
-import ElButton from '../../button'
-import { addClass, removeClass } from '../../../src/utils/dom'
-import { t } from '../../../src/locale'
-import Dialog from '../../../src/utils/aria-dialog'
-
-// let messageBox
-const typeMap = {
-  success: 'success',
-  info: 'info',
-  warning: 'warning',
-  error: 'error'
-}
-
-export default {
-  mixins: [Locale],
-
-  props: {
-    ...popupProps,
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    title: {
-      type: String,
-      default: null
-    },
-    message: {
-      type: [Object, String],
-      default() {
-        return {}
-      }
-    },
-    dangerouslyUseHTMLString: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'info',
-      validator(val) {
-        return ['success', 'warning', 'info', 'error'].indexOf(val)
-      }
-    },
-    iconClass: {
-      type: String,
-      default: null
-    },
-    customClass: {
-      type: String,
-      default: null
-    },
-    callback: {
-      type: Function,
-      default: () => {}
-    },
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    beforeClose: {
-      type: Function,
-      default: () => {}
-    },
-    distinguishCancelAndClose: {
-      type: Boolean,
-      default: false
-    },
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-    showCancelButton: {
-      type: Boolean,
-      default: false
-    },
-    showConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    cancelButtonClass: {
-      type: String,
-      default: null
-    },
-    confirmButtonClass: {
-      type: String,
-      default: null
-    },
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-    closeOnHashChange: {
-      type: Boolean,
-      default: true
-    },
-    showInput: {
-      type: Boolean,
-      default: false
-    },
-    inputPlaceholder: {
-      type: String,
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    inputValue: {
-      type: String,
-      default: ''
-    },
-    inputPattern: {
-      type: RegExp,
-      default: null
-    },
-    inputValidator: {
-      type: Function,
-      default: () => {}
-    },
-    inputErrorMessage: {
-      type: String,
-      default: ''
-    },
-    center: {
-      type: Boolean,
-      default: false
-    },
-    roundButton: {
-      type: Boolean,
-      default: false
-    },
-    _type: {
-      type: String,
-      default: ''
-    },
-    cancelButtonLoading: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  components: {
-    ElInput,
-    ElButton
-  },
-  setup(props, { attrs }) {
-    const confirmButtonText = ref(attrs.confirmButtonText || '确认')
-    const cancelButtonText = ref(attrs.cancelButtonText || '取消')
-
-    let messageBox = ''
-    const instance = getCurrentInstance()
-    const {
-      closeOnClickModal,
-      distinguishCancelAndClose,
-      _type,
-      beforeClose,
-      callback,
-      type,
-      iconClass,
-      message,
-      inputType,
-      cancelButtonClass,
-      confirmButtonClass,
-      closeOnHashChange,
-      lockScroll,
-      inputPattern,
-      inputValidator,
-      inputValue
-    } = toRefs(props)
-    const state = reactive({
-      visible: false,
-      action: null,
-      editorErrorMessage: null,
-      uid: 0,
-      inputValue: unref(inputValue),
-      isVnode: false
-    })
-    const { rendered, open, close, restoreBodyStyle } = usePopup({
-      ...toRefs(props),
-      visible: state.visible
-    })
-    const validate = () => {
-      if (unref(_type) === 'prompt') {
-        const _inputPattern = unref(inputPattern)
-        if (_inputPattern && !_inputPattern.test(state.inputValue || '')) {
-          state.editorErrorMessage =
-            state.inputErrorMessage || t('el.messagebox.error')
-          addClass(getInputElement(), 'invalid')
-          return false
-        }
-        const _inputValidator = unref(inputValidator)
-        if (typeof _inputValidator === 'function') {
-          const validateResult = _inputValidator(state.inputValue)
-          if (validateResult === false) {
-            state.editorErrorMessage =
-              state.inputErrorMessage || t('el.messagebox.error')
-            addClass(getInputElement(), 'invalid')
-            return false
-          }
-          if (typeof validateResult === 'string') {
-            state.editorErrorMessage = validateResult
-            addClass(getInputElement(), 'invalid')
-            return false
-          }
-        }
-      }
-      state.editorErrorMessage = ''
-      removeClass(getInputElement(), 'invalid')
-      return true
-    }
-    const doClose = () => {
-      if (!state.visible) return
-      state.visible = false
-      rendered.value = false
-      close()
-      // messageBox.closeDialog() // 解绑
-      if (lockScroll) {
-        setTimeout(restoreBodyStyle, 200)
-      }
-      nextTick(() => {
-        if (state.action) {
-          unref(callback)(state.action, instance.vnode)
-        }
-      })
-    }
-    const getSafeClose = () => {
-      const currentId = state.uid
-      return () => {
-        nextTick(() => {
-          if (currentId === state.uid) doClose()
-        })
-      }
-    }
-    const confirmButtonLoading = ref(false)
-    const handleAction = (action) => {
-      if (unref(_type) === 'prompt' && action === 'confirm' && !validate()) {
-        return
-      }
-      state.action = action
-      if (typeof unref(beforeClose) === 'function') {
-        const close = getSafeClose()
-        unref(beforeClose)(action, instance.vnode, close)
-      } else {
-        doClose()
-      }
-    }
-    const handleWrapperClick = () => {
-      if (unref(closeOnClickModal)) {
-        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
-      }
-    }
-    const handleKeyup = (element = {}) => {
-      if (element.code !== 'Escape') return
-      if (unref(props.closeOnPressEscape)) {
-        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
-      }
-    }
-    const handleInputEnter = () => {
-      if (unref(inputType) !== 'textarea') {
-        return handleAction('confirm')
-      }
-    }
-    const icon = computed(() => {
-      return (
-        unref(iconClass) ||
-        (unref(type) && typeMap[unref(type)]
-          ? `el-icon-${typeMap[unref(type)]}`
-          : '')
-      )
-    })
-    const cancelButtonClasses = computed(() => {
-      return `el-button--primary ${unref(cancelButtonClass)}`
-    })
-    const confirmButtonClasses = computed(() => {
-      return `el-button--primary ${unref(confirmButtonClass)}`
-    })
-    const getFirstFocus = () => {
-      const btn = instance.vnode.el.querySelector(
-        '.el-message-box__btns .el-button'
-      )
-      const title = instance.vnode.el.querySelector(
-        '.el-message-box__btns .el-message-box__title'
-      )
-      return btn || title
-    }
-    const getInputElement = () => {
-      const inputRefs = instance.refs.input.$refs
-      return inputRefs.input || inputRefs.textarea
-    }
-    onMounted(() => {
-      state.visible = true
-      nextTick(() => {
-        state.uid++
-        rendered.value = true
-        open()
-      })
-      if (unref(_type) === 'alert' || unref(_type) === 'confirm') {
-        nextTick(() => {
-          instance.refs.confirm.$el.focus()
-        })
-      }
-      const focusAfterClosed = document.activeElement
-      messageBox = new Dialog(
-        instance.vnode.el,
-        focusAfterClosed,
-        getFirstFocus()
-      )
-      if (unref(closeOnHashChange)) {
-        window.addEventListener('hashchange', doClose)
-      }
-      window.addEventListener('keyup', handleKeyup)
-      if (unref(_type) !== 'prompt') return
-      setTimeout(() => {
-        if (instance.refs.input && instance.refs.input.$el) {
-          getInputElement().focus()
-        }
-      }, 500)
-    })
-    onUnmounted(() => {
-      if (unref(closeOnHashChange)) {
-        window.removeEventListener('hashchange', doClose)
-      }
-      window.removeEventListener('keyup', handleKeyup)
-      setTimeout(() => {
-        messageBox.closeDialog()
-      })
-    })
-
-    const MessageToVNode = (message) => {
-      let v = ''
-      if (isVNode(unref(message))) {
-        v = unref(message)
-        render(v, document.createElement('div'))
-        state.isVnode = true
-        return v.el.innerHTML
-      } else {
-        state.isVnode = false
-        return message
-      }
-    }
-    watch(
-      () => state.inputValue,
-      (val) => {
-        nextTick(() => {
-          if (unref(_type) === 'prompt' && val !== null) {
-            validate()
-          }
-        })
-      }
-    )
-    return {
-      ...toRefs(props),
-      changedMessage: MessageToVNode(message),
-      handleInputEnter,
-      handleAction,
-      state,
-      handleWrapperClick,
-      icon,
-      cancelButtonClasses,
-      cancelButtonText,
-      t,
-      confirmButtonLoading,
-      confirmButtonClasses,
-      confirmButtonText
-    }
-  }
-}
-</script>
diff --git a/packages/element3/packages/message-box/src/prop/prop.js b/packages/element3/packages/message-box/src/prop/prop.js
index 01969a0e8..9da460f24 100644
--- a/packages/element3/packages/message-box/src/prop/prop.js
+++ b/packages/element3/packages/message-box/src/prop/prop.js
@@ -72,7 +72,7 @@ const props = {
     type: String,
     default: 'alert',
     validator(val) {
-      return ['confirm', 'prompt', 'alert'].indexOf(val)
+      return ['confirm', 'prompt', 'alert'].indexOf(val) > -1
     }
   },
   inputValue: {
@@ -126,10 +126,13 @@ const props = {
     default: null
   },
   type: {
-    type: String,
+    type: [String, null],
     default: 'info',
     validator(val) {
-      return ['success', 'warning', 'info', 'error'].indexOf(val)
+      return (
+        ['success', 'warning', 'info', 'error'].indexOf(val) > -1 ||
+        val === null
+      )
     }
   },
   iconClass: {
diff --git a/packages/website/examples/docs/zh-CN/message-box.md b/packages/website/examples/docs/zh-CN/message-box.md
index 612ca6221..93455514e 100644
--- a/packages/website/examples/docs/zh-CN/message-box.md
+++ b/packages/website/examples/docs/zh-CN/message-box.md
@@ -179,7 +179,7 @@
                 done()
               }
             }
-          }).then((action) => {
+          }).then(({action}) => {
             Message({
               type: 'info',
               message: 'action: ' + action