feat(DropdownItem): add get-container prop (#4611)

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,7 +107,13 @@ export default createComponent({
     }
 
     return (
-      <div vShow={this.showWrapper} style={style} class={bem([direction])}>
+      <div>
+        <div
+          vShow={this.showWrapper}
+          ref="wrapper"
+          style={style}
+          class={bem([direction])}
+        >
           <Popup
             vModel={this.showPopup}
             overlay={overlay}
@@ -127,6 +134,7 @@ export default createComponent({
             {this.slots('default')}
           </Popup>
         </div>
+      </div>
     );
   }
 });

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
 

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
 

src/dropdown-menu/test/__snapshots__/demo.spec.js.snap

@@ -6,61 +6,81 @@ 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>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
+      </div>
+      <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
       </div>
     </div>
+  </div>
   <div>
     <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>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
+      </div>
+      <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
       </div>
     </div>
+  </div>
   <div>
     <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>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
+      </div>
+      <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
       </div>
     </div>
+  </div>
   <div>
     <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>
         <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
           <!---->
         </div>
+      </div>
+      <div>
         <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
           <!---->
         </div>
       </div>
     </div>
+  </div>
   <div>
     <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>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
+      </div>
+      <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
           <!---->
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -4,6 +4,7 @@ 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>
     <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">
@@ -17,9 +18,12 @@ exports[`click option 1`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -27,6 +31,7 @@ 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>
     <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">
@@ -39,9 +44,12 @@ exports[`close-on-click-outside 1`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -49,9 +57,11 @@ 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>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -59,12 +69,16 @@ 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>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -72,12 +86,16 @@ 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>
     <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
       <!---->
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -85,6 +103,7 @@ 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>
     <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">
@@ -97,9 +116,12 @@ exports[`direction up 2`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -107,6 +129,7 @@ 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>
     <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">
@@ -119,18 +142,23 @@ exports[`disable close-on-click-outside 1`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
 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>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -138,6 +166,7 @@ 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>
     <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">
@@ -152,9 +181,12 @@ exports[`render option icon 1`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -162,6 +194,7 @@ 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>
     <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">
@@ -174,9 +207,12 @@ exports[`show dropdown item 1`] = `
         </div>
       </div>
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
@@ -184,6 +220,7 @@ 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>
     <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">
@@ -196,6 +233,8 @@ exports[`show dropdown item 2`] = `
         </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">
@@ -208,6 +247,7 @@ exports[`show dropdown item 2`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
@@ -215,6 +255,7 @@ 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>
     <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">
@@ -227,6 +268,8 @@ exports[`show dropdown item 3`] = `
         </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">
@@ -239,6 +282,7 @@ exports[`show dropdown item 3`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;
 
@@ -246,30 +290,38 @@ 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>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
+  <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
       <!---->
     </div>
+  </div>
 </div>
 `;
 
 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>
     <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>
 `;
 
 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>
     <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>
 `;

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) {
+        if (container && container !== el.parentNode) {
-          container.appendChild(this.$el);
+          container.appendChild(el);
         }
 
         if (afterPortal) {