blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] DropdownMenu: add icon option (#3855)

Browse Source
This commit is contained in:
neverland 2019-07-15 18:44:33 +08:00 committed by GitHub
parent d15315b8e4
commit dbe56fd362
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,8 +82,9 @@ export default createComponent({
<Cell
clickable
key={option.value}
icon={option.icon}
title={option.text}
titleStyle={{ color: active ? activeColor : '' }}
style={{ color: active ? activeColor : '' }}
onClick={() => {
this.showPopup = false;

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

@ -134,3 +134,11 @@ Use ref to get DropdownItem instance and call instance methods
| Name | Attribute | Return value | Description |
|------|------|------|------|
| toggle | show: boolean | - | Toggle display |
### Data Structure of Option
| Key | Description | Type |
|------|------|------|
| text | Text | `string` |
| value | Value | `string | number` |
| icon | Left icon | `string` |

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

@ -138,3 +138,11 @@ export default {
| 方法名 | 参数 | 返回值 | 介绍 |
|------|------|------|------|
| toggle | show: boolean | - | 切换菜单是否展示 |
### Option 数据结构
| 键名 | 说明 | 类型 |
|------|------|------|
| text | 文字 | `string` |
| value | 标识符 | `string | number` |
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` |

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

@ -5,12 +5,12 @@ exports[`click option 1`] = `
<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 class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2011;">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title" style=""><span>A</span></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2013;">
<div class="van-cell van-cell--clickable" style="">
<div class="van-cell__title"><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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -27,10 +27,10 @@ exports[`close-on-click-outside 1`] = `
<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 class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -73,10 +73,10 @@ exports[`direction up 1`] = `
<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: 768px;">
<div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter-active" style="z-index: 2010; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -96,10 +96,10 @@ exports[`disable close-on-click-outside 1`] = `
<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 class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -123,6 +123,31 @@ exports[`disable dropdown item 1`] = `
</div>
`;
exports[`render option icon 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><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 class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
<!----></i>
<div class="van-cell__title"><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"><i class="van-icon van-icon-success van-cell__left-icon">
<!----></i>
<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; 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);"><div class="van-ellipsis">A</div></span></div>
@ -130,8 +155,8 @@ exports[`show dropdown item 1`] = `
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -152,8 +177,8 @@ exports[`show dropdown item 2`] = `
<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);"><div class="van-ellipsis">A</div></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 van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -165,8 +190,8 @@ exports[`show dropdown item 2`] = `
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -184,8 +209,8 @@ exports[`show dropdown item 3`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></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 van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>
@ -197,8 +222,8 @@ exports[`show dropdown item 3`] = `
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
<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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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>

19
src/dropdown-menu/test/index.spec.js
View File

@ -21,8 +21,8 @@ function renderWrapper(options = {}) {
direction: options.direction || 'down',
closeOnClickOutside: options.closeOnClickOutside,
options: [
{ text: 'A', value: 0 },
{ text: 'B', value: 1 }
{ text: 'A', value: 0, icon: options.icon },
{ text: 'B', value: 1, icon: options.icon }
]
};
}
@ -46,6 +46,19 @@ test('show dropdown item', async () => {
expect(wrapper).toMatchSnapshot();
});
test('render option icon', async () => {
const wrapper = renderWrapper({
icon: 'success'
});
await later();
const titles = wrapper.findAll('.van-dropdown-menu__title');
titles.at(0).trigger('click');
expect(wrapper).toMatchSnapshot();
});
test('close-on-click-outside', async () => {
const wrapper = renderWrapper({
closeOnClickOutside: true
@ -79,7 +92,7 @@ test('direction up', async () => {
direction: 'up'
});
await later();
await later(10);
const titles = wrapper.findAll('.van-dropdown-menu__title');