From 9d12e895fe2612fc3d56f99e5f7eeccdc2dab180 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 10 Nov 2019 11:47:11 +0800
Subject: [PATCH] feat(DropdownItem): add title slot (#4975)

---
 src/dropdown-menu/README.md                      |  7 +++++++
 src/dropdown-menu/README.zh-CN.md                |  7 +++++++
 src/dropdown-menu/index.js                       |  2 +-
 .../test/__snapshots__/index.spec.js.snap        | 13 +++++++++++++
 src/dropdown-menu/test/index.spec.js             | 16 ++++++++++++++++
 src/tab/README.zh-CN.md                          |  2 +-
 6 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index e5e62eb65..2b43cbbb4 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -140,6 +140,13 @@ Use `active-color` prop to custom active color of the title and options
 | opened | Triggered when opened menu | - |
 | close | Triggered when close menu | - |
 
+### DropdownItem Slots
+
+| Name | Description |
+|------|------|
+| default | Content |
+| title | Custom title |
+
 ### DropdownItem Methods
 
 Use ref to get DropdownItem instance and call instance methods
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 374458847..5311af8db 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -144,6 +144,13 @@ export default {
 | opened | 打开菜单栏且动画结束后触发 | - |
 | close | 关闭菜单栏时触发 | - |
 
+### DropdownItem Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 菜单内容 |
+| title | 自定义标题，不支持动态渲染 |
+
 ### DropdownItem 方法
 
 通过 ref 可以获取到 DropdownItem 实例并调用实例方法
diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index 376cb07fa..6913136ca 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -95,7 +95,7 @@ export default createComponent({
           ]}
           style={{ color: item.showPopup ? this.activeColor : '' }}
         >
-          <div class="van-ellipsis">{item.displayTitle}</div>
+          <div class="van-ellipsis">{item.slots('title') || item.displayTitle}</div>
         </span>
       </div>
     ));
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 707471384..c21d68e16 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -303,6 +303,19 @@ exports[`title prop 1`] = `
 </div>
 `;
 
+exports[`title slot 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">
+            Custom Title
+          </div></span></div>
+  <div>
+    <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
 exports[`toggle method 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--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
diff --git a/src/dropdown-menu/test/index.spec.js b/src/dropdown-menu/test/index.spec.js
index 6b6000b79..61bdfdf98 100644
--- a/src/dropdown-menu/test/index.spec.js
+++ b/src/dropdown-menu/test/index.spec.js
@@ -241,3 +241,19 @@ test('toggle method', async done => {
     }
   });
 });
+
+test('title slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item>
+          <template #title>
+            Custom Title
+          </template>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 76a2bf74d..97f1dd0e8 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -221,7 +221,7 @@ export default {
 | 名称 | 说明 |
 |------|------|
 | default | 标签页内容 |
-| title | 自定义标签 |
+| title | 自定义标题，不支持动态渲染 |
 
 ### Tabs Events