[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-dropdown-menu>
|
||||
<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('customContent')">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item
|
||||
v-model="value1"
|
||||
:options="option1"
|
||||
/>
|
||||
<van-dropdown-item
|
||||
:title="$t('itemTitle')"
|
||||
ref="item"
|
||||
>
|
||||
<van-switch-cell
|
||||
v-model="switch1"
|
||||
:title="$t('switchTitle1')"
|
||||
/>
|
||||
<van-switch-cell
|
||||
v-model="switch2"
|
||||
:title="$t('switchTitle2')"
|
||||
/>
|
||||
<van-button
|
||||
type="info"
|
||||
block
|
||||
@click="onConfirm"
|
||||
>
|
||||
{{ $t('confirm') }}
|
||||
</van-button>
|
||||
</van-dropdown-item>
|
||||
</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
|
||||
v-model="value1"
|
||||
disabled
|
||||
:options="option1"
|
||||
/>
|
||||
<van-dropdown-item
|
||||
v-model="value2"
|
||||
disabled
|
||||
:options="option2"
|
||||
/>
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
customContent: '自定义菜单内容',
|
||||
disableMenu: '禁用菜单',
|
||||
switchTitle1: '包邮',
|
||||
switchTitle2: '团购',
|
||||
itemTitle: '筛选',
|
||||
expandDirection: '向上展开',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
]
|
||||
},
|
||||
'en-US': {
|
||||
customContent: 'Custom Content',
|
||||
disableMenu: 'Disable Menu',
|
||||
switchTitle1: 'Title',
|
||||
switchTitle2: 'Title',
|
||||
itemTitle: 'Title',
|
||||
expandDirection: 'Expand Direction',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
switch1: true,
|
||||
switch2: false,
|
||||
value1: 0,
|
||||
value2: 'a'
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
option1() {
|
||||
return this.$t('option1');
|
||||
},
|
||||
|
||||
option2() {
|
||||
return this.$t('option2');
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,135 @@
|
||||
# DropdownMenu
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { DropdownMenu, DropdownItem } from 'vant';
|
||||
|
||||
Vue.use(DropdownMenu).use(DropdownItem);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
option1: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: 'Option A', value: 'a' },
|
||||
{ text: 'Option B', value: 'b' },
|
||||
{ text: 'Option C', value: 'c' },
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value" :options="option" />
|
||||
<van-dropdown-item title="Title" ref="item">
|
||||
<van-switch-cell v-model="switch1" title="Title" />
|
||||
<van-switch-cell v-model="switch2" title="Title" />
|
||||
<van-button block type="info" @click="onConfirm">Confirm</van-button>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
switch1: false,
|
||||
switch2: false,
|
||||
option: [
|
||||
{ text: 'Option1', value: 0 },
|
||||
{ text: 'Option2', value: 1 },
|
||||
{ text: 'Option3', value: 2 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
| Attribute | Description | Type | 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` |
|
||||
|
||||
### DropdownItem Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|------|
|
||||
| value | Value of current option，can use `v-model` | `String | Number` | - |
|
||||
| title | Item title | `String` | Text of selected option |
|
||||
| options | Options | `Array` | `[]` |
|
||||
| disabled | Whether to disable dropdown item | `Boolean` | `false` |
|
||||
| title-class | Title class | `String` | - |
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered select option and value changed | value |
|
||||
| open | Triggered when open menu | - |
|
||||
| opened | Triggered when opened menu | - |
|
||||
| close | Triggered when close menu | - |
|
||||
|
||||
### DropdownItem Methods
|
||||
|
||||
Use ref to get DropdownItem instance and call instance methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|------|------|------|------|
|
||||
| toggle | show: boolean | - | Toggle display |
|
||||
@@ -0,0 +1,110 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { BLUE } from '../utils/color';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { ClickOutsideMixin } from '../mixins/click-outside';
|
||||
|
||||
const [createComponent, bem] = createNamespace('dropdown-menu');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
ParentMixin('vanDropdownMenu'),
|
||||
ClickOutsideMixin({
|
||||
event: 'click',
|
||||
method: 'onClickOutside'
|
||||
})
|
||||
],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 0.2
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'down'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: BLUE
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
offset: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleItem(active) {
|
||||
const { menu } = this.$refs;
|
||||
const rect = menu.getBoundingClientRect();
|
||||
|
||||
if (this.direction === 'down') {
|
||||
this.offset = rect.bottom;
|
||||
} else {
|
||||
this.offset = window.innerHeight - rect.top;
|
||||
}
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
item.toggle();
|
||||
} else if (item.showPopup) {
|
||||
item.hide(true);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onClickOutside() {
|
||||
this.children.forEach(item => {
|
||||
item.hide();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const Titles = this.children.map((item, index) => (
|
||||
<div
|
||||
role="button"
|
||||
tabindex={item.disabled ? -1 : 0}
|
||||
class={bem('item', { disabled: item.disabled })}
|
||||
onClick={() => {
|
||||
if (!item.disabled) {
|
||||
this.toggleItem(index);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span
|
||||
class={[
|
||||
bem('title', {
|
||||
down: item.showPopup === (this.direction === 'down')
|
||||
}),
|
||||
item.titleClass
|
||||
]}
|
||||
style={{ color: item.showPopup ? this.activeColor : '' }}
|
||||
>
|
||||
{item.displayTitle}
|
||||
</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<div ref="menu" class={[bem(), 'van-hairline--top-bottom']}>
|
||||
{Titles}
|
||||
{this.slots('default')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-dropdown-menu {
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.van-dropdown-menu__title {
|
||||
color: @gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
font-size: @dropdown-menu-title-font-size;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: -12px;
|
||||
border: 3px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
transform: rotate(-45deg);
|
||||
opacity: .8;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&--down {
|
||||
&::after {
|
||||
top: 7px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<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">全部商品</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 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 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 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 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>
|
||||
</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">全部商品</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 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>
|
||||
`;
|
||||
@@ -0,0 +1,201 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
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 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>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>B</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>
|
||||
</div>
|
||||
<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; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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">A</span></div>
|
||||
<!---->
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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"></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 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>
|
||||
`;
|
||||
|
||||
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; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
|
||||
<!---->
|
||||
</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">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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--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 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>
|
||||
<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: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</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" style="">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 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;" 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-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></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" 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; animation-duration: 0.2s;"></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 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>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,197 @@
|
||||
import { mount, later } from '../../../test/utils';
|
||||
import DropdownMenu from '..';
|
||||
import DropdownItem from '../../dropdown-item';
|
||||
|
||||
function renderWrapper(options = {}) {
|
||||
return mount({
|
||||
template: `
|
||||
<dropdown-menu :direction="direction">
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: options.value || 0,
|
||||
title: options.title || '',
|
||||
direction: options.direction || 'down',
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test('show dropdown item', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
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();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
titles.at(0).trigger('click');
|
||||
|
||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||
options.at(1).trigger('click');
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title prop', async () => {
|
||||
const wrapper = renderWrapper({ title: 'Title' });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('didn`t find matched option', async () => {
|
||||
const wrapper = renderWrapper({ value: -1 });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('destroy one item', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item v-if="render" v-model="value" :options="options" />
|
||||
<dropdown-item v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
render: true,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
wrapper.setData({ render: false });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable dropdown item', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item disabled v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const title = wrapper.find('.van-dropdown-menu__title');
|
||||
title.trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('change event', async () => {
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item v-model="value" :options="options" @change="onChange" />
|
||||
<dropdown-item v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
titles.at(0).trigger('click');
|
||||
|
||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||
options.at(0).trigger('click');
|
||||
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
|
||||
options.at(1).trigger('click');
|
||||
expect(onChange).toHaveBeenCalledWith(1);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
# DropdownMenu 下拉菜单
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { DropdownMenu, DropdownItem } from 'vant';
|
||||
|
||||
Vue.use(DropdownMenu).use(DropdownItem);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
<van-dropdown-item v-model="value2" :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 'a',
|
||||
option1: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
],
|
||||
option2: [
|
||||
{ text: '默认排序', value: 'a' },
|
||||
{ text: '好评排序', value: 'b' },
|
||||
{ text: '销量排序', value: 'c' },
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义菜单内容
|
||||
|
||||
通过插槽可以自定义`DropdownItem`的内容，此时需要使用实例上的`toggle`方法手动控制菜单的显示
|
||||
|
||||
```html
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value" :options="option" />
|
||||
<van-dropdown-item title="筛选" ref="item">
|
||||
<van-switch-cell v-model="switch1" title="包邮" />
|
||||
<van-switch-cell v-model="switch2" title="团购" />
|
||||
<van-button block type="info" @click="onConfirm">确认</van-button>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
switch1: false,
|
||||
switch2: false,
|
||||
option: [
|
||||
{ text: '全部商品', value: 0 },
|
||||
{ text: '新款商品', value: 1 },
|
||||
{ text: '活动商品', value: 2 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 向上展开
|
||||
|
||||
将`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
|
||||
<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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| 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` | - |
|
||||
|
||||
### DropdownItem Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | `String | Number` | - | - |
|
||||
| title | 菜单项标题 | `String` | 当前选中项文字 | - |
|
||||
| options | 选项数组 | `Array` | `[]` | - |
|
||||
| disabled | 是否禁用菜单 | `Boolean` | `false` | - |
|
||||
| title-class | 标题额外类名 | `String` | - | - |
|
||||
|
||||
### DropdownItem Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| open | 打开菜单栏时触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|------|------|------|------|
|
||||
| toggle | show: boolean | - | 切换菜单是否展示 |
|
||||
Reference in New Issue
Block a user