From 9d941272d5852e0a7b89913002c7d1ad1f013892 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 3 Sep 2019 10:05:11 +0800
Subject: [PATCH] docs(DropdownMenu): add demo of active-color (#4331)

---
 src/dropdown-menu/README.md                   | 11 +++++++++++
 src/dropdown-menu/README.zh-CN.md             | 11 +++++++++++
 src/dropdown-menu/demo/index.vue              | 19 +++++++++++++++++--
 .../test/__snapshots__/demo.spec.js.snap      | 12 ++++++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 38272055c..ebbfa3829 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -77,6 +77,17 @@ export default {
 };
 ```
 
+### Custom Active Color
+
+Use `active-color` prop to custom active color of the title and options
+
+```html
+<van-dropdown-menu active-color="#f44">
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
+</van-dropdown-menu>
+```
+
 ### Expand Direction
 
 ```html
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 3eeb4c1db..96132181e 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -79,6 +79,17 @@ export default {
 };
 ```
 
+### 自定义选中态颜色
+
+通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
+
+```html
+<van-dropdown-menu active-color="#f44">
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
+</van-dropdown-menu>
+```
+
 ### 向上展开
 
 将`direction`属性值设置为`up`，菜单即可向上展开
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 07daa46a5..0844f410c 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -42,6 +42,19 @@
       </van-dropdown-menu>
     </demo-block>
 
+    <demo-block :title="$t('customActiveColor')">
+      <van-dropdown-menu active-color="#f44">
+        <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('expandDirection')">
       <van-dropdown-menu direction="up">
         <van-dropdown-item
@@ -76,12 +89,13 @@
 export default {
   i18n: {
     'zh-CN': {
-      customContent: '自定义菜单内容',
       disableMenu: '禁用菜单',
       switchTitle1: '包邮',
       switchTitle2: '团购',
       itemTitle: '筛选',
       expandDirection: '向上展开',
+      customContent: '自定义菜单内容',
+      customActiveColor: '自定义选中态颜色',
       option1: [
         { text: '全部商品', value: 0 },
         { text: '新款商品', value: 1 },
@@ -94,12 +108,13 @@ export default {
       ]
     },
     'en-US': {
-      customContent: 'Custom Content',
       disableMenu: 'Disable Menu',
       switchTitle1: 'Title',
       switchTitle2: 'Title',
       itemTitle: 'Title',
       expandDirection: 'Expand Direction',
+      customContent: 'Custom Content',
+      customActiveColor: 'Custom Active Color',
       option1: [
         { text: 'Option1', value: 0 },
         { text: 'Option2', value: 1 },
diff --git a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index bc0011e5d..13c27a5ba 100644
--- a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -26,6 +26,18 @@ exports[`renders demo correctly 1`] = `
       </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"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></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"><div class="van-ellipsis">全部商品</div></span></div>