blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-08 05:29:45 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2019-09-27 19:37:29 +08:00 committed by GitHub
parent ffdb823117
commit 4e837ee558
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 253 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/dropdown-item/index.js
View File

@ -2,12 +2,13 @@ import { createNamespace } from '../utils';
import Cell from '../cell'; import Cell from '../cell';
import Icon from '../icon'; import Icon from '../icon';
import Popup from '../popup'; import Popup from '../popup';
import { PortalMixin } from '../mixins/portal';
import { ChildrenMixin } from '../mixins/relation'; import { ChildrenMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('dropdown-item'); const [createComponent, bem] = createNamespace('dropdown-item');
export default createComponent({ export default createComponent({
mixins: [ChildrenMixin('vanDropdownMenu')], mixins: [PortalMixin({ ref: 'wrapper' }), ChildrenMixin('vanDropdownMenu')],
props: { props: {
value: null, value: null,
@ -106,26 +107,33 @@ export default createComponent({
} }
return ( return (
<div vShow={this.showWrapper} style={style} class={bem([direction])}> <div>
<Popup <div
vModel={this.showPopup} vShow={this.showWrapper}
overlay={overlay} ref="wrapper"
class={bem('content')} style={style}
position={direction === 'down' ? 'top' : 'bottom'} class={bem([direction])}
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} <Popup
{this.slots('default')} vModel={this.showPopup}
</Popup> 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> </div>
); );
} }

1
src/dropdown-menu/README.md
View File

@ -129,6 +129,7 @@ Use `active-color` prop to custom active color of the title and options
| options | Options | *Option[]* | `[]` | - | | options | Options | *Option[]* | `[]` | - |
| disabled | Whether to disable dropdown item | *boolean* | `false` | - | | disabled | Whether to disable dropdown item | *boolean* | `false` | - |
| title-class | Title class | *string* | - | - | | title-class | Title class | *string* | - | - |
| get-container | Return the mount node for menu | *string \| () => Element* | - | 2.2.4 |
### DropdownItem Events ### DropdownItem Events

1
src/dropdown-menu/README.zh-CN.md
View File

@ -133,6 +133,7 @@ export default {
| options | 选项数组 | *Option[]* | `[]` | - | | options | 选项数组 | *Option[]* | `[]` | - |
| disabled | 是否禁用菜单 | *boolean* | `false` | - | | disabled | 是否禁用菜单 | *boolean* | `false` | - |
| title-class | 标题额外类名 | *string* | - | - | | title-class | 标题额外类名 | *string* | - | - |
| get-container | 指定弹出菜单挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | 2.2.4 |
### DropdownItem Events ### DropdownItem Events

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

@ -6,11 +6,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
</div> </div>
@ -18,11 +22,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
</div> </div>
@ -30,11 +38,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
</div> </div>
@ -42,11 +54,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
</div> </div>
@ -54,11 +70,15 @@ exports[`renders demo correctly 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
</div> </div>

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

@ -4,21 +4,25 @@ exports[`click option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></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; z-index: 2014;" name="van-popup-slide-top"> <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> <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 class="van-cell__title"><span>A</span></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
</div> <div class="van-cell__title"><span>A</span></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> </div>
<div class="van-cell__title"><span>B</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>B</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
<!----></i></div>
</div>
</div> </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>
</div> </div>
`; `;
@ -27,20 +31,24 @@ exports[`close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</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> </div>
`; `;
@ -49,8 +57,10 @@ exports[`destroy one item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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; display: none;"> <div>
<!----> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
</div> </div>
</div> </div>
`; `;
@ -59,11 +69,15 @@ exports[`didn\`t find matched option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
`; `;
@ -72,11 +86,15 @@ exports[`direction up 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
`; `;
@ -85,20 +103,24 @@ exports[`direction up 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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--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 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>
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom"> <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</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>
</div> </div>
`; `;
@ -107,20 +129,24 @@ exports[`disable close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</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> </div>
`; `;
@ -128,8 +154,10 @@ exports[`disable close-on-click-outside 1`] = `
exports[`disable dropdown item 1`] = ` exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
</div> </div>
`; `;
@ -138,22 +166,26 @@ exports[`render option icon 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<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"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<!----></i> <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">
<div class="van-cell__title"><span>A</span></div> <!----></i>
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></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"> </div>
<!----></i> <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">
<div class="van-cell__title"><span>B</span></div> <!----></i>
<div class="van-cell__title"><span>B</span></div>
</div>
</div> </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>
</div> </div>
`; `;
@ -162,20 +194,24 @@ exports[`show dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</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> </div>
`; `;
@ -184,27 +220,31 @@ exports[`show dropdown item 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</div> </div>
@ -215,27 +255,31 @@ exports[`show dropdown item 3`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell__title"><span>A</span></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__value"><i class="van-icon van-icon-success van-dropdown-item__icon"> <div class="van-cell__title"><span>A</span></div>
<!----></i></div> <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
</div> <!----></i></div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"> </div>
<div class="van-cell__title"><span>B</span></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>
</div> </div>
@ -246,11 +290,15 @@ exports[`title prop 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<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> </div>
`; `;
@ -258,9 +306,11 @@ exports[`title prop 1`] = `
exports[`toggle method 1`] = ` exports[`toggle method 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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 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>
<div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></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;" name="van-popup-slide-top"></div> <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>
</div> </div>
`; `;
@ -268,8 +318,10 @@ exports[`toggle method 1`] = `
exports[`toggle method 2`] = ` exports[`toggle method 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <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;"> <div>
<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 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>
</div> </div>
`; `;

8
src/mixins/portal.ts
View File

@ -2,6 +2,7 @@ import Vue, { PropType } from 'vue';
import { GetContainer } from './popup/type'; import { GetContainer } from './popup/type';
type PortalMixinOptions = { type PortalMixinOptions = {
ref?: string;
afterPortal?: () => void; afterPortal?: () => void;
}; };
@ -13,7 +14,7 @@ function getElement(selector: string | GetContainer): Element | null {
return selector(); return selector();
} }
export function PortalMixin({ afterPortal }: PortalMixinOptions) { export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
return Vue.extend({ return Vue.extend({
props: { props: {
getContainer: [String, Function] as (PropType<string | GetContainer>) getContainer: [String, Function] as (PropType<string | GetContainer>)
@ -32,6 +33,7 @@ export function PortalMixin({ afterPortal }: PortalMixinOptions) {
methods: { methods: {
portal() { portal() {
const { getContainer } = this; const { getContainer } = this;
const el = ref ? this.$refs[ref] as HTMLElement : this.$el;
let container; let container;
if (getContainer) { if (getContainer) {
@ -40,8 +42,8 @@ export function PortalMixin({ afterPortal }: PortalMixinOptions) {
container = this.$parent.$el; container = this.$parent.$el;
} }
if (container && container !== this.$el.parentNode) { if (container && container !== el.parentNode) {
container.appendChild(this.$el); container.appendChild(el);
} }
if (afterPortal) { if (afterPortal) {