From dbe56fd362f109bb367be2f70bb20b6788208591 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 15 Jul 2019 18:44:33 +0800 Subject: [PATCH] [new feature] DropdownMenu: add icon option (#3855) --- src/dropdown-item/index.js | 3 +- src/dropdown-menu/README.md | 8 ++ src/dropdown-menu/README.zh-CN.md | 8 ++ .../test/__snapshots__/index.spec.js.snap | 73 +++++++++++++------ src/dropdown-menu/test/index.spec.js | 19 ++++- 5 files changed, 83 insertions(+), 28 deletions(-) diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js index 3e572cc07..9b2a03425 100644 --- a/src/dropdown-item/index.js +++ b/src/dropdown-item/index.js @@ -82,8 +82,9 @@ export default createComponent({ { this.showPopup = false; diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 0c0b137c6..8e4367b14 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -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` | diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 7dca6fbb0..f4b8a5a91 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -138,3 +138,11 @@ export default { | 方法名 | 参数 | 返回值 | 介绍 | |------|------|------|------| | toggle | show: boolean | - | 切换菜单是否展示 | + +### Option 数据结构 + +| 键名 | 说明 | 类型 | +|------|------|------| +| text | 文字 | `string` | +| value | 标识符 | `string | number` | +| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` | diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap index 7fa7fb67e..aedc50ae1 100644 --- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap +++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap @@ -5,12 +5,12 @@ exports[`click option 1`] = `
B
B
-
-
-
A
+
+
+
A
-
-
B
+
+
B
@@ -27,10 +27,10 @@ exports[`close-on-click-outside 1`] = `
A
A
-
+
-
-
A
+
+
A
@@ -73,10 +73,10 @@ exports[`direction up 1`] = `
A
A
-
+
-
-
A
+
+
A
@@ -96,10 +96,10 @@ exports[`disable close-on-click-outside 1`] = `
A
A
-
+
-
-
A
+
+
A
@@ -123,6 +123,31 @@ exports[`disable dropdown item 1`] = `
`; +exports[`render option icon 1`] = ` +
+
A
+
A
+
+
+
+
+ +
A
+
+
+
+
+ +
B
+
+
+
+ +
+`; + exports[`show dropdown item 1`] = `
A
@@ -130,8 +155,8 @@ exports[`show dropdown item 1`] = `
-
-
A
+
+
A
@@ -152,8 +177,8 @@ exports[`show dropdown item 2`] = `
A
-
-
A
+
+
A
@@ -165,8 +190,8 @@ exports[`show dropdown item 2`] = `
-
-
A
+
+
A
@@ -184,8 +209,8 @@ exports[`show dropdown item 3`] = `
A
-
-
A
+
+
A
@@ -197,8 +222,8 @@ exports[`show dropdown item 3`] = `
-
-
A
+
+
A
diff --git a/src/dropdown-menu/test/index.spec.js b/src/dropdown-menu/test/index.spec.js index b63cf2d8a..14babd999 100644 --- a/src/dropdown-menu/test/index.spec.js +++ b/src/dropdown-menu/test/index.spec.js @@ -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');