docs(DropdownMenu): add demo of active-color (#4331)

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

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`，菜单即可向上展开

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 },

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>