From 6d0c54e8f4e9c1c9982778df8a36c7ac3fc2f905 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 31 Jul 2020 20:09:57 +0800
Subject: [PATCH] feat(DropdownMenu): add @dropdown-menu-box-shadow var

---
 src/dropdown-menu/README.md       | 14 +++++++++++---
 src/dropdown-menu/README.zh-CN.md | 14 +++++++++++---
 src/dropdown-menu/demo/index.vue  | 18 +++++++++++++++---
 src/dropdown-menu/index.less      |  2 +-
 src/style/var.less                |  1 +
 5 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 0805893f3..867fa403e 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -48,8 +48,16 @@ export default {
 <van-dropdown-menu>
   <van-dropdown-item v-model="value" :options="option" />
   <van-dropdown-item title="Title" ref="item">
-    <van-switch-cell v-model="switch1" title="Title" />
-    <van-switch-cell v-model="switch2" title="Title" />
+    <van-cell center title="Title">
+      <template #right-icon>
+        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="Title">
+      <template #right-icon>
+        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
     <div style="padding: 5px 16px;">
       <van-button type="danger" block round @click="onConfirm">
         Confirm
@@ -86,7 +94,7 @@ export default {
 Use `active-color` prop to custom active color of the title and options
 
 ```html
-<van-dropdown-menu active-color="#ee0a24">
+<van-dropdown-menu active-color="#1989fa">
   <van-dropdown-item v-model="value1" :options="option1" />
   <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index ac1547b93..5cc9870b0 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -50,8 +50,16 @@ export default {
 <van-dropdown-menu>
   <van-dropdown-item v-model="value" :options="option" />
   <van-dropdown-item title="筛选" ref="item">
-    <van-switch-cell v-model="switch1" title="包邮" />
-    <van-switch-cell v-model="switch2" title="团购" />
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
     <div style="padding: 5px 16px;">
       <van-button type="danger" block round @click="onConfirm">
         确认
@@ -88,7 +96,7 @@ export default {
 通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
 
 ```html
-<van-dropdown-menu active-color="#ee0a24">
+<van-dropdown-menu active-color="#1989fa">
   <van-dropdown-item v-model="value1" :options="option1" />
   <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 4eeb25073..b3685b29d 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -11,8 +11,16 @@
       <van-dropdown-menu>
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item :title="t('itemTitle')" ref="item">
-          <van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
-          <van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
+          <van-cell center :title="t('switchTitle1')">
+            <template #right-icon>
+              <van-switch v-model="switch1" size="24" :active-color="RED" />
+            </template>
+          </van-cell>
+          <van-cell center :title="t('switchTitle2')">
+            <template #right-icon>
+              <van-switch v-model="switch2" size="24" :active-color="RED" />
+            </template>
+          </van-cell>
           <div style="padding: 5px 16px;">
             <van-button
               type="danger"
@@ -29,7 +37,7 @@
     </demo-block>
 
     <demo-block :title="t('customActiveColor')">
-      <van-dropdown-menu active-color="#ee0a24">
+      <van-dropdown-menu :active-color="BLUE">
         <van-dropdown-item v-model="value1" :options="option1" />
         <van-dropdown-item v-model="value2" :options="option2" />
       </van-dropdown-menu>
@@ -52,6 +60,8 @@
 </template>
 
 <script>
+import { RED, BLUE } from '../../utils/constant';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -96,6 +106,8 @@ export default {
 
   data() {
     return {
+      RED,
+      BLUE,
       switch1: true,
       switch2: false,
       value1: 0,
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index 42cdfc9d5..dbdffb2ee 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -8,7 +8,7 @@
     display: flex;
     height: @dropdown-menu-height;
     background-color: @dropdown-menu-background-color;
-    box-shadow: 0 2px 12px fade(@gray-7, 12);
+    box-shadow: @dropdown-menu-box-shadow;
 
     &--opened {
       z-index: @dropdown-item-z-index + 1;
diff --git a/src/style/var.less b/src/style/var.less
index cf14453e0..4b8e4ee15 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -329,6 +329,7 @@
 // DropdownMenu
 @dropdown-menu-height: 48px;
 @dropdown-menu-background-color: @white;
+@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12);
 @dropdown-menu-title-font-size: 15px;
 @dropdown-menu-title-text-color: @text-color;
 @dropdown-menu-title-active-text-color: @red;