mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] DropdownMenu: add direction prop (#3490)
This commit is contained in:
neverland
GitHub
parent
156ac95382
commit
6b7307a657
@ -55,7 +55,15 @@ export default sfc({
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { top, zIndex, overlay, duration, activeColor, closeOnClickOverlay } = this.parent;
|
||||
const {
|
||||
zIndex,
|
||||
offset,
|
||||
overlay,
|
||||
duration,
|
||||
direction,
|
||||
activeColor,
|
||||
closeOnClickOverlay
|
||||
} = this.parent;
|
||||
|
||||
const Options = this.options.map(option => {
|
||||
const active = option.value === this.value;
|
||||
@ -81,11 +89,18 @@ export default sfc({
|
||||
|
||||
const emit = eventName => () => this.$emit(eventName);
|
||||
|
||||
const style = { zIndex };
|
||||
if (direction === 'down') {
|
||||
style.top = `${offset}px`;
|
||||
} else {
|
||||
style.bottom = `${offset}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div vShow={this.showWrapper} style={{ top: `${top}px`, zIndex }} class={bem()}>
|
||||
<div vShow={this.showWrapper} style={style} class={bem([direction])}>
|
||||
<Popup
|
||||
vModel={this.showPopup}
|
||||
position="top"
|
||||
position={direction === 'down' ? 'top' : 'bottom'}
|
||||
duration={this.transition ? duration : 0}
|
||||
class={bem('content')}
|
||||
overlay={overlay}
|
||||
|
||||
@ -3,10 +3,17 @@
|
||||
.van-dropdown-item {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&--up {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--down {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@ -42,6 +42,19 @@
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('expandDirection')">
|
||||
<van-dropdown-menu direction="up">
|
||||
<van-dropdown-item
|
||||
v-model="value1"
|
||||
:options="option1"
|
||||
/>
|
||||
<van-dropdown-item
|
||||
v-model="value2"
|
||||
:options="option2"
|
||||
/>
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disableMenu')">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item
|
||||
@ -68,6 +81,7 @@ export default {
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
expandDirection: '向上展开',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
@ -85,6 +99,7 @@ export default {
|
||||
switchTitle1: 'Title',
|
||||
switchTitle2: 'Title',
|
||||
itemTitle: 'Title',
|
||||
expandDirection: 'Expand Direction',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
|
||||
@ -76,6 +76,24 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Expand Direction
|
||||
|
||||
```html
|
||||
<van-dropdown-menu direction="up">
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" disabled :options="option1" />
|
||||
<van-dropdown-item v-model="value2" disabled :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### DropdownMenu Props
|
||||
@ -85,6 +103,7 @@ export default {
|
||||
| active-color | Active color of title and option | `String` | `#1989fa` |
|
||||
| z-index | z-index of menu item | `Number` | `10` |
|
||||
| duration | Transition duration, unit second | `Number` | `0.2` |
|
||||
| direction | Expand direction, can be set to `up` | `String` | `down` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
|
||||
|
||||
|
||||
@ -6,10 +6,13 @@ import { ClickOutsideMixin } from '../mixins/click-outside';
|
||||
const [sfc, bem] = use('dropdown-menu');
|
||||
|
||||
export default sfc({
|
||||
mixins: [ParentMixin('vanDropdownMenu'), ClickOutsideMixin({
|
||||
event: 'click',
|
||||
method: 'onClickOutside'
|
||||
})],
|
||||
mixins: [
|
||||
ParentMixin('vanDropdownMenu'),
|
||||
ClickOutsideMixin({
|
||||
event: 'click',
|
||||
method: 'onClickOutside'
|
||||
})
|
||||
],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
@ -24,6 +27,10 @@ export default sfc({
|
||||
type: Number,
|
||||
default: 0.2
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'down'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: BLUE
|
||||
@ -36,7 +43,7 @@ export default sfc({
|
||||
|
||||
data() {
|
||||
return {
|
||||
top: 0
|
||||
offset: 0
|
||||
};
|
||||
},
|
||||
|
||||
@ -44,7 +51,12 @@ export default sfc({
|
||||
toggleItem(active) {
|
||||
const { menu } = this.$refs;
|
||||
const rect = menu.getBoundingClientRect();
|
||||
this.top = rect.bottom;
|
||||
|
||||
if (this.direction === 'down') {
|
||||
this.offset = rect.bottom;
|
||||
} else {
|
||||
this.offset = window.innerHeight - rect.top;
|
||||
}
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
@ -75,7 +87,12 @@ export default sfc({
|
||||
}}
|
||||
>
|
||||
<span
|
||||
class={[bem('title', { active: item.show }), item.titleClass]}
|
||||
class={[
|
||||
bem('title', {
|
||||
down: item.showPopup === (this.direction === 'down')
|
||||
}),
|
||||
item.titleClass
|
||||
]}
|
||||
style={{ color: item.showPopup ? this.activeColor : '' }}
|
||||
>
|
||||
{item.displayTitle}
|
||||
|
||||
@ -38,15 +38,14 @@
|
||||
border: 3px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
transform: rotate(-45deg);
|
||||
opacity: .6;
|
||||
opacity: .8;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&--active {
|
||||
&--down {
|
||||
&::after {
|
||||
top: 7px;
|
||||
transform: rotate(135deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,10 +6,10 @@ 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">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -18,10 +18,22 @@ 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">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</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>
|
||||
@ -30,10 +42,10 @@ 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">全部商品</span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,8 +4,8 @@ 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">B</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2005;" name="van-popup-slide-top">
|
||||
<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: 2009;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style=""><span>A</span></div>
|
||||
</div>
|
||||
@ -16,7 +16,30 @@ exports[`click option 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -26,7 +49,7 @@ 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">A</span></div>
|
||||
<!---->
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -36,10 +59,33 @@ 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"></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
|
||||
<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 van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +94,7 @@ exports[`didn\`t find matched option 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">A</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -56,9 +102,9 @@ exports[`disable dropdown item 1`] = `
|
||||
|
||||
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" style="color: rgb(25, 137, 250);">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
|
||||
<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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
@ -71,7 +117,7 @@ exports[`show dropdown item 1`] = `
|
||||
</div>
|
||||
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
@ -80,32 +126,9 @@ exports[`show dropdown item 1`] = `
|
||||
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" style="">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
|
||||
<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 van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<!---->
|
||||
</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" style="">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
|
||||
<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-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
@ -116,7 +139,7 @@ exports[`show dropdown item 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
|
||||
<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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
@ -132,14 +155,46 @@ exports[`show dropdown item 3`] = `
|
||||
</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" style="">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></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 class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute;"></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">Title</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ import DropdownItem from '../../dropdown-item';
|
||||
function renderWrapper(options = {}) {
|
||||
return mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-menu :direction="direction">
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
</dropdown-menu>
|
||||
@ -18,6 +18,7 @@ function renderWrapper(options = {}) {
|
||||
return {
|
||||
value: options.value || 0,
|
||||
title: options.title || '',
|
||||
direction: options.direction || 'down',
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
@ -37,13 +38,38 @@ test('show dropdown item', async () => {
|
||||
titles.at(0).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
titles.at(1).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
titles.at(1).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('close on click outside', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
document.body.click();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('direction up', async () => {
|
||||
const wrapper = renderWrapper({
|
||||
direction: 'up'
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('click option', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
|
||||
@ -78,6 +78,17 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 向上展开
|
||||
|
||||
将`direction`属性值设置为`up`，菜单即可向上展开
|
||||
|
||||
```html
|
||||
<van-dropdown-menu direction="up">
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
### 禁用菜单
|
||||
|
||||
```html
|
||||
@ -96,6 +107,7 @@ export default {
|
||||
| active-color | 菜单标题和选项的选中态颜色 | `String` | `#1989fa` | - |
|
||||
| z-index | 菜单栏 z-index 层级 | `Number` | `10` | - |
|
||||
| duration | 动画时长，单位秒 | `Number` | `0.2` | 2.0.0 |
|
||||
| direction | 菜单展开方向，可选值为`up` | `String` | `down` | 2.0.1 |
|
||||
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | `Boolean` | `true` | - |
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user