add usePopup

SGH-Depository · Aug 18, 2020 · c3d398b · c3d398b
1 parent 6dd348a
commit c3d398b
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 319 deletions.
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
@@ -80,7 +80,8 @@ ComponentNames.forEach(name => {
     'alert',
     'carousel',
     'breadcrumb',
-    'breadcrumb-item'
+    'breadcrumb-item',
+    'dialog'
 
   ].indexOf(name) > -1) { // 白名单 挨个替换
     var componentName = uppercamelcase(name)

diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
@@ -1,20 +1,15 @@
 <template>
-  <transition
-    name="dialog-fade"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave">
-    <div
-      v-show="visible"
-      class="el-dialog__wrapper"
-      @click.self="handleWrapperClick">
+  <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave">
+    <div v-show="visible" class="el-dialog__wrapper" @click.self="handleWrapperClick">
       <div
         role="dialog"
         :key="key"
         aria-modal="true"
         :aria-label="title || 'dialog'"
         :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
         ref="dialog"
-        :style="style">
+        :style="style"
+      >
         <div class="el-dialog__header">
           <slot name="title">
             <span class="el-dialog__title">{{ title }}</span>
@@ -24,11 +19,14 @@
             class="el-dialog__headerbtn"
             aria-label="Close"
             v-if="showClose"
-            @click="handleClose">
+            @click="handleClose"
+          >
             <i class="el-dialog__close el-icon el-icon-close"></i>
           </button>
         </div>
-        <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
+        <div class="el-dialog__body" v-if="rendered">
+          <slot></slot>
+        </div>
         <div class="el-dialog__footer" v-if="$slots.footer">
           <slot name="footer"></slot>
         </div>
@@ -38,176 +36,188 @@
 </template>
 
 <script>
-  import Popup from 'element-ui/src/utils/popup';
-  import Migrating from 'element-ui/src/mixins/migrating';
-  import emitter from 'element-ui/src/mixins/emitter';
-  import {popupProps,usePopup} from "element-ui/src/use/popup";
-
-  export default {
-    name: 'ElDialog',
-
-    mixins: [Popup, emitter, Migrating],
-
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-
-      modal: {
-        type: Boolean,
-        default: true
-      },
+import Migrating from "element-ui/src/mixins/migrating";
+import emitter from "element-ui/src/mixins/emitter";
+import { popupProps, usePopup } from "element-ui/src/use/popup";
+import { useEmitter } from "element-ui/src/use/emitter";
+import {
+  toRefs,
+  ref,
+  getCurrentInstance,
+  computed,
+  onMounted,
+  onUnmounted,
+  watch,
+  nextTick
+} from "vue";
+
+export default {
+  name: "ElDialog",
+
+  // mixins: [Popup, emitter, Migrating],
+
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
 
-      modalAppendToBody: {
-        type: Boolean,
-        default: true
-      },
+    modal: {
+      type: Boolean,
+      default: true,
+    },
 
-      appendToBody: {
-        type: Boolean,
-        default: false
-      },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
 
-      lockScroll: {
-        type: Boolean,
-        default: true
-      },
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
 
-      closeOnClickModal: {
-        type: Boolean,
-        default: true
-      },
+    lockScroll: {
+      type: Boolean,
+      default: true,
+    },
 
-      closeOnPressEscape: {
-        type: Boolean,
-        default: true
-      },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true,
+    },
 
-      showClose: {
-        type: Boolean,
-        default: true
-      },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true,
+    },
 
-      width: String,
+    showClose: {
+      type: Boolean,
+      default: true,
+    },
 
-      fullscreen: Boolean,
+    width: String,
 
-      customClass: {
-        type: String,
-        default: ''
-      },
+    fullscreen: Boolean,
 
-      top: {
-        type: String,
-        default: '15vh'
-      },
-      beforeClose: Function,
-      center: {
-        type: Boolean,
-        default: false
-      },
-      destroyOnClose: Boolean,
-      ...popupProps
+    customClass: {
+      type: String,
+      default: "",
     },
 
-    data() {
-      return {
-        closed: false,
-        key: 0
-      };
+    top: {
+      type: String,
+      default: "15vh",
     },
-
-    watch: {
-      visible(val) {
-        if (val) {
-          this.closed = false;
-          this.$emit('open');
-          this.$el.addEventListener('scroll', this.updatePopper);
-          this.$nextTick(() => {
-            this.$refs.dialog.scrollTop = 0;
-          });
-          if (this.appendToBody) {
-            document.body.appendChild(this.$el);
-          }
-        } else {
-          this.$el.removeEventListener('scroll', this.updatePopper);
-          if (!this.closed) this.$emit('close');
-          if (this.destroyOnClose) {
-            this.$nextTick(() => {
-              this.key++;
-            });
-          }
-        }
-      }
+    beforeClose: Function,
+    center: {
+      type: Boolean,
+      default: false,
     },
-
-    computed: {
-      style() {
-        let style = {};
-        if (!this.fullscreen) {
-          style.marginTop = this.top;
-          if (this.width) {
-            style.width = this.width;
-          }
+    destroyOnClose: Boolean,
+    ...popupProps,
+  },
+  emits: ["update:visible", "close", "opened","open"],
+  setup(props, { emit }) {
+    const { visible, rendered, open, close } = usePopup(props);
+    const { appendToBody, fullscreen, top, width, closeOnClickModal,destroyOnClose } = toRefs(props);
+    const { beforeClose } = props;
+    const closed = ref(false);
+    const key = ref(0);
+    const dialog = ref(null);
+    const instanc = getCurrentInstance();
+    const { broadcast } = useEmitter();
+    const style = computed(() => {
+      let style = {};
+      if (fullscreen.value) {
+        style.marginTop = top.value;
+        if (width.value) {
+          style.width = width.value;
         }
-        return style;
       }
-    },
-
-    methods: {
-      getMigratingConfig() {
-        return {
-          props: {
-            'size': 'size is removed.'
-          }
-        };
-      },
-      handleWrapperClick() {
-        if (!this.closeOnClickModal) return;
-        this.handleClose();
-      },
-      handleClose() {
-        if (typeof this.beforeClose === 'function') {
-          this.beforeClose(this.hide);
-        } else {
-          this.hide();
+      return style;
+    });
+    const getMigratingConfig = () => {
+      return {
+        props: {
+          size: "size is removed.",
+        },
+      };
+    };
+    const handleWrapperClick = () => {
+      if (!closeOnClickModal) return;
+      handleClose();
+    };
+    const handleClose = () => {
+      if (typeof beforeClose === "function") {
+        beforeClose(hide);
+      } else {
+        hide();
+      }
+    };
+    const hide = (cancel) => {
+      if (cancel !== false) {
+        emit("update:visible", false);
+        emit("close");
+        closed.value = true;
+      }
+    };
+    const updatePopper = () => {
+      broadcast("ElSelectDropdown", "updatePopper");
+      broadcast("ElDropdownMenu", "updatePopper");
+    };
+    const afterEnter = () => {
+      emit("opened");
+    };
+    const afterLeave = () => {
+      emit("closed");
+    };
+    watch(visible,(val)=>{
+       let el = instanc.ctx.$el;
+       if (val) {
+        closed.value = false;
+        emit("open");
+        el.addEventListener("scroll", updatePopper);
+        nextTick(() => {
+          dialog.value.scrollTop = 0;
+        });
+        if (appendToBody.value) {
+          document.body.appendChild(el);
         }
-      },
-      hide(cancel) {
-        if (cancel !== false) {
-          this.$emit('update:visible', false);
-          this.$emit('close');
-          this.closed = true;
+      } else {
+        el.removeEventListener("scroll", updatePopper);
+        if (!closed.value) emit("close");
+        if (destroyOnClose&&destroyOnClose.value) {
+          nextTick(() => {
+            key.value++;
+          });
         }
-      },
-      updatePopper() {
-        this.broadcast('ElSelectDropdown', 'updatePopper');
-        this.broadcast('ElDropdownMenu', 'updatePopper');
-      },
-      afterEnter() {
-        this.$emit('opened');
-      },
-      afterLeave() {
-        this.$emit('closed');
       }
-    },
-
-    mounted() {
-      if (this.visible) {
-        this.rendered = true;
-        this.open();
-        if (this.appendToBody) {
-          document.body.appendChild(this.$el);
+    });
+    onMounted(() => {
+      if (visible.value) {
+        rendered.value = true;
+        open();
+        if (appendToBody.value) {
+          document.body.appendChild(instanc.ctx.$el);
         }
       }
-    },
-
-    destroyed() {
-      // if appendToBody is true, remove DOM node after destroy
-      if (this.appendToBody && this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el);
+    });
+    onUnmounted(() => {
+      let el = instanc.ctx.$el;
+      if(appendToBody.value && el && el.parentNode) {
+        el.parentNode.removeChild(el);
       }
+    });
+    return {
+      dialog,
+      key,
+      fullscreen,
+      rendered,
+      handleClose,
+      style
     }
-  };
+  }
+};
 </script>