diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js
index bfa1ec551..d8a31a9ef 100644
--- a/src/dropdown-item/index.js
+++ b/src/dropdown-item/index.js
@@ -2,12 +2,13 @@ import { createNamespace } from '../utils';
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
+import { PortalMixin } from '../mixins/portal';
 import { ChildrenMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('dropdown-item');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanDropdownMenu')],
+  mixins: [PortalMixin({ ref: 'wrapper' }), ChildrenMixin('vanDropdownMenu')],
 
   props: {
     value: null,
@@ -106,26 +107,33 @@ export default createComponent({
     }
 
     return (
-      <div vShow={this.showWrapper} style={style} class={bem([direction])}>
-        <Popup
-          vModel={this.showPopup}
-          overlay={overlay}
-          class={bem('content')}
-          position={direction === 'down' ? 'top' : 'bottom'}
-          duration={this.transition ? duration : 0}
-          closeOnClickOverlay={closeOnClickOverlay}
-          overlayStyle={{ position: 'absolute' }}
-          onOpen={this.onOpen}
-          onClose={this.onClose}
-          onOpened={this.onOpened}
-          onClosed={() => {
-            this.showWrapper = false;
-            this.$emit('closed');
-          }}
+      <div>
+        <div
+          vShow={this.showWrapper}
+          ref="wrapper"
+          style={style}
+          class={bem([direction])}
         >
-          {Options}
-          {this.slots('default')}
-        </Popup>
+          <Popup
+            vModel={this.showPopup}
+            overlay={overlay}
+            class={bem('content')}
+            position={direction === 'down' ? 'top' : 'bottom'}
+            duration={this.transition ? duration : 0}
+            closeOnClickOverlay={closeOnClickOverlay}
+            overlayStyle={{ position: 'absolute' }}
+            onOpen={this.onOpen}
+            onClose={this.onClose}
+            onOpened={this.onOpened}
+            onClosed={() => {
+              this.showWrapper = false;
+              this.$emit('closed');
+            }}
+          >
+            {Options}
+            {this.slots('default')}
+          </Popup>
+        </div>
       </div>
     );
   }
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index bb3db48e7..e5e62eb65 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -129,6 +129,7 @@ Use `active-color` prop to custom active color of the title and options
 | options | Options | *Option[]* | `[]` | - |
 | disabled | Whether to disable dropdown item | *boolean* | `false` | - |
 | title-class | Title class | *string* | - | - |
+| get-container | Return the mount node for menu | *string \| () => Element* | - | 2.2.4 |
 
 ### DropdownItem Events
 
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 09d6b6ff8..cc084caf7 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -133,6 +133,7 @@ export default {
 | options | 选项数组 | *Option[]* | `[]` | - |
 | disabled | 是否禁用菜单 | *boolean* | `false` | - |
 | title-class | 标题额外类名 | *string* | - | - |
+| get-container | 指定弹出菜单挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | 2.2.4 |
 
 ### DropdownItem Events
 
diff --git a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index 13c27a5ba..30cb1b513 100644
--- a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -6,11 +6,15 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
     </div>
   </div>
@@ -18,11 +22,15 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
     </div>
   </div>
@@ -30,11 +38,15 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
     </div>
   </div>
@@ -42,11 +54,15 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
-      <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+          <!---->
+        </div>
       </div>
-      <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+          <!---->
+        </div>
       </div>
     </div>
   </div>
@@ -54,11 +70,15 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
       <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
-      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-        <!---->
+      <div>
+        <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+          <!---->
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 6c5656846..707471384 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -4,21 +4,25 @@ exports[`click option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>A</span></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>B</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>A</span></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>B</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -27,20 +31,24 @@ exports[`close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -49,8 +57,10 @@ exports[`destroy one item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <!---->
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -59,11 +69,15 @@ exports[`didn\`t find matched option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -72,11 +86,15 @@ exports[`direction up 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+      <!---->
+    </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -85,20 +103,24 @@ exports[`direction up 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px;">
-    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px;">
+      <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -107,20 +129,24 @@ exports[`disable close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -128,8 +154,10 @@ exports[`disable close-on-click-outside 1`] = `
 exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -138,22 +166,26 @@ exports[`render option icon 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
-          <!----></i>
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
-          <!----></i>
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
+            <!----></i>
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
+            <!----></i>
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -162,20 +194,24 @@ exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -184,27 +220,31 @@ exports[`show dropdown item 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
@@ -215,27 +255,31 @@ exports[`show dropdown item 3`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
-        <div class="van-cell__title"><span>A</span></div>
-        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
-            <!----></i></div>
-      </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
-        <div class="van-cell__title"><span>B</span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+          <div class="van-cell__title"><span>A</span></div>
+          <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
+              <!----></i></div>
+        </div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
+          <div class="van-cell__title"><span>B</span></div>
+        </div>
       </div>
     </div>
   </div>
@@ -246,11 +290,15 @@ exports[`title prop 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
-    <!---->
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
   </div>
 </div>
 `;
@@ -258,9 +306,11 @@ exports[`title prop 1`] = `
 exports[`toggle method 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
+    </div>
   </div>
 </div>
 `;
@@ -268,8 +318,10 @@ exports[`toggle method 1`] = `
 exports[`toggle method 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
-  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/mixins/portal.ts b/src/mixins/portal.ts
index 80ac392cc..a5ff4681a 100644
--- a/src/mixins/portal.ts
+++ b/src/mixins/portal.ts
@@ -2,6 +2,7 @@ import Vue, { PropType } from 'vue';
 import { GetContainer } from './popup/type';
 
 type PortalMixinOptions = {
+  ref?: string;
   afterPortal?: () => void;
 };
 
@@ -13,7 +14,7 @@ function getElement(selector: string | GetContainer): Element | null {
   return selector();
 }
 
-export function PortalMixin({ afterPortal }: PortalMixinOptions) {
+export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
   return Vue.extend({
     props: {
       getContainer: [String, Function] as (PropType<string | GetContainer>)
@@ -32,6 +33,7 @@ export function PortalMixin({ afterPortal }: PortalMixinOptions) {
     methods: {
       portal() {
         const { getContainer } = this;
+        const el = ref ? this.$refs[ref] as HTMLElement : this.$el;
 
         let container;
         if (getContainer) {
@@ -40,8 +42,8 @@ export function PortalMixin({ afterPortal }: PortalMixinOptions) {
           container = this.$parent.$el;
         }
 
-        if (container && container !== this.$el.parentNode) {
-          container.appendChild(this.$el);
+        if (container && container !== el.parentNode) {
+          container.appendChild(el);
         }
 
         if (afterPortal) {