refactor(DropdownItem): remove portal mixin

src/dropdown-item/index.js

@@ -1,9 +1,10 @@
+import { Teleport } from 'vue';
+
 // Utils
 import { createNamespace } from '../utils';
 import { on, off } from '../utils/dom/event';
 
 // Mixins
-import { PortalMixin } from '../mixins/portal';
 import { ChildrenMixin } from '../mixins/relation';
 
 // Components
@@ -14,11 +15,12 @@ import Popup from '../popup';
 const [createComponent, bem] = createNamespace('dropdown-item');
 
 export default createComponent({
-  mixins: [PortalMixin({ ref: 'wrapper' }), ChildrenMixin('vanDropdownMenu')],
+  mixins: [ChildrenMixin('vanDropdownMenu')],
 
   props: {
     title: String,
     disabled: Boolean,
+    teleport: [String, Object],
     modelValue: null,
     titleClass: String,
     options: {
@@ -150,38 +152,42 @@ export default createComponent({
       style.bottom = `${offset}px`;
     }
 
-    return (
-      <div>
-        <div
-          vShow={this.showWrapper}
-          ref="wrapper"
-          style={style}
-          class={bem([direction])}
-          onClick={this.onClickWrapper}
+    const Content = (
+      <div
+        vShow={this.showWrapper}
+        ref="wrapper"
+        style={style}
+        class={bem([direction])}
+        onClick={this.onClickWrapper}
+      >
+        <Popup
+          show={this.showPopup}
+          overlay={overlay}
+          class={bem('content')}
+          position={direction === 'down' ? 'top' : 'bottom'}
+          duration={this.transition ? duration : 0}
+          lazyRender={this.lazyRender}
+          overlayStyle={{ position: 'absolute' }}
+          closeOnClickOverlay={closeOnClickOverlay}
+          onOpen={this.onOpen}
+          onClose={this.onClose}
+          onOpened={this.onOpened}
+          onClosed={() => {
+            this.showWrapper = false;
+            this.$emit('closed');
+          }}
+          {...{ 'onUpdate:modelValue': this.onTogglePopup }}
         >
-          <Popup
-            show={this.showPopup}
-            overlay={overlay}
-            class={bem('content')}
-            position={direction === 'down' ? 'top' : 'bottom'}
-            duration={this.transition ? duration : 0}
-            lazyRender={this.lazyRender}
-            overlayStyle={{ position: 'absolute' }}
-            closeOnClickOverlay={closeOnClickOverlay}
-            onOpen={this.onOpen}
-            onClose={this.onClose}
-            onOpened={this.onOpened}
-            onClosed={() => {
-              this.showWrapper = false;
-              this.$emit('closed');
-            }}
-            {...{ 'onUpdate:modelValue': this.onTogglePopup }}
-          >
-            {Options}
-            {this.$slots.default?.()}
-          </Popup>
-        </div>
+          {Options}
+          {this.$slots.default?.()}
+        </Popup>
       </div>
     );
+
+    if (this.teleport) {
+      return <Teleport to={this.teleport}>{Content}</Teleport>;
+    }
+
+    return Content;
   },
 });

src/mixins/portal.js

@@ -1,47 +0,0 @@
-function getElement(teleport) {
-  if (typeof teleport === 'string') {
-    return document.querySelector(teleport);
-  }
-
-  return teleport;
-}
-
-export function PortalMixin({ ref, afterPortal } = {}) {
-  return {
-    props: {
-      teleport: [String, Object],
-    },
-
-    watch: {
-      teleport: 'portal',
-    },
-
-    mounted() {
-      if (this.teleport) {
-        this.portal();
-      }
-    },
-
-    methods: {
-      portal() {
-        const { teleport } = this;
-        const el = ref ? this.$refs[ref] : this.$el;
-
-        let container;
-        if (teleport) {
-          container = getElement(teleport);
-        } else if (this.$parent) {
-          container = this.$parent.$el;
-        }
-
-        if (container && container !== el.parentNode) {
-          container.appendChild(el);
-        }
-
-        if (afterPortal) {
-          afterPortal.call(this);
-        }
-      },
-    },
-  };
-}