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,16 +18,20 @@ 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>
 `;
 
 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,52 +44,66 @@ 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>
 `;
 
 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>
 `;
 
 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>
 `;
 
 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>
 `;
 
 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,16 +116,20 @@ 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>
 `;
 
 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,25 +142,31 @@ 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>
 `;
 
 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,16 +181,20 @@ 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>
 `;
 
 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,16 +207,20 @@ 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>
 `;
 
 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">
@@ -209,12 +248,14 @@ exports[`show dropdown item 2`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 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">
@@ -240,36 +283,45 @@ exports[`show dropdown item 3`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 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) {
-          container.appendChild(this.$el);
+        if (container && container !== el.parentNode) {
+          container.appendChild(el);
         }
 
         if (afterPortal) {