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

src/dropdown-item/index.js

@@ -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;
 

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` |

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` |

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

@@ -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-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">
+      <div class="van-cell van-cell--clickable" style="">
-        <div class="van-cell__title" style=""><span>A</span></div>
+        <div class="van-cell__title"><span>A</span></div>
       </div>
-      <div class="van-cell van-cell--clickable">
+      <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>B</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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 van-cell--clickable" style="color: rgb(25, 137, 250);">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
+        <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>

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: 'A', value: 0, icon: options.icon },
-          { text: 'B', value: 1 }
+          { 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');