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,8 +152,7 @@ export default createComponent({
       style.bottom = `${offset}px`;
     }
 
-    return (
+    const Content = (
-      <div>
       <div
         vShow={this.showWrapper}
         ref="wrapper"
@@ -181,7 +182,12 @@ export default createComponent({
           {this.$slots.default?.()}
         </Popup>
       </div>
-      </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);
-        }
-      },
-    },
-  };
-}