From 6b7307a65750dbcddc394719f16bab49006affd6 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 13 Jun 2019 13:09:35 +0800
Subject: [PATCH] [new feature] DropdownMenu: add direction prop (#3490)

---
 packages/dropdown-item/index.js               |  21 ++-
 packages/dropdown-item/index.less             |   9 +-
 packages/dropdown-menu/demo/index.vue         |  15 ++
 packages/dropdown-menu/en-US.md               |  19 +++
 packages/dropdown-menu/index.js               |  31 +++-
 packages/dropdown-menu/index.less             |   5 +-
 .../test/__snapshots__/demo.spec.js.snap      |  24 +++-
 .../test/__snapshots__/index.spec.js.snap     | 133 +++++++++++++-----
 packages/dropdown-menu/test/index.spec.js     |  30 +++-
 packages/dropdown-menu/zh-CN.md               |  12 ++
 10 files changed, 238 insertions(+), 61 deletions(-)

diff --git a/packages/dropdown-item/index.js b/packages/dropdown-item/index.js
index 4797b711b..28b7e5c75 100644
--- a/packages/dropdown-item/index.js
+++ b/packages/dropdown-item/index.js
@@ -55,7 +55,15 @@ export default sfc({
   },
 
   render(h) {
-    const { top, zIndex, overlay, duration, activeColor, closeOnClickOverlay } = this.parent;
+    const {
+      zIndex,
+      offset,
+      overlay,
+      duration,
+      direction,
+      activeColor,
+      closeOnClickOverlay
+    } = this.parent;
 
     const Options = this.options.map(option => {
       const active = option.value === this.value;
@@ -81,11 +89,18 @@ export default sfc({
 
     const emit = eventName => () => this.$emit(eventName);
 
+    const style = { zIndex };
+    if (direction === 'down') {
+      style.top = `${offset}px`;
+    } else {
+      style.bottom = `${offset}px`;
+    }
+
     return (
-      <div vShow={this.showWrapper} style={{ top: `${top}px`, zIndex }} class={bem()}>
+      <div vShow={this.showWrapper} style={style} class={bem([direction])}>
         <Popup
           vModel={this.showPopup}
-          position="top"
+          position={direction === 'down' ? 'top' : 'bottom'}
           duration={this.transition ? duration : 0}
           class={bem('content')}
           overlay={overlay}
diff --git a/packages/dropdown-item/index.less b/packages/dropdown-item/index.less
index 5bcd794c9..78de8ad27 100644
--- a/packages/dropdown-item/index.less
+++ b/packages/dropdown-item/index.less
@@ -3,10 +3,17 @@
 .van-dropdown-item {
   position: fixed;
   right: 0;
-  bottom: 0;
   left: 0;
   overflow: hidden;
 
+  &--up {
+    top: 0;
+  }
+
+  &--down {
+    bottom: 0;
+  }
+
   &__content {
     position: absolute;
   }
diff --git a/packages/dropdown-menu/demo/index.vue b/packages/dropdown-menu/demo/index.vue
index a22858c9b..07daa46a5 100644
--- a/packages/dropdown-menu/demo/index.vue
+++ b/packages/dropdown-menu/demo/index.vue
@@ -42,6 +42,19 @@
       </van-dropdown-menu>
     </demo-block>
 
+    <demo-block :title="$t('expandDirection')">
+      <van-dropdown-menu direction="up">
+        <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('disableMenu')">
       <van-dropdown-menu>
         <van-dropdown-item
@@ -68,6 +81,7 @@ export default {
       switchTitle1: '包邮',
       switchTitle2: '团购',
       itemTitle: '筛选',
+      expandDirection: '向上展开',
       option1: [
         { text: '全部商品', value: 0 },
         { text: '新款商品', value: 1 },
@@ -85,6 +99,7 @@ export default {
       switchTitle1: 'Title',
       switchTitle2: 'Title',
       itemTitle: 'Title',
+      expandDirection: 'Expand Direction',
       option1: [
         { text: 'Option1', value: 0 },
         { text: 'Option2', value: 1 },
diff --git a/packages/dropdown-menu/en-US.md b/packages/dropdown-menu/en-US.md
index ede54c0fd..b794cf9a6 100644
--- a/packages/dropdown-menu/en-US.md
+++ b/packages/dropdown-menu/en-US.md
@@ -76,6 +76,24 @@ export default {
 };
 ```
 
+### Expand Direction
+
+```html
+<van-dropdown-menu direction="up">
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
+</van-dropdown-menu>
+```
+
+### Disabled
+
+```html
+<van-dropdown-menu>
+  <van-dropdown-item v-model="value1" disabled :options="option1" />
+  <van-dropdown-item v-model="value2" disabled :options="option2" />
+</van-dropdown-menu>
+```
+
 ## API
 
 ### DropdownMenu Props
@@ -85,6 +103,7 @@ export default {
 | active-color | Active color of title and option | `String` | `#1989fa` |
 | z-index | z-index of menu item | `Number` | `10` |
 | duration | Transition duration, unit second | `Number` | `0.2` |
+| direction | Expand direction, can be set to `up` | `String` | `down` |
 | overlay | Whether to show overlay | `Boolean` | `true` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 
diff --git a/packages/dropdown-menu/index.js b/packages/dropdown-menu/index.js
index 5e2201c8b..805a15df4 100644
--- a/packages/dropdown-menu/index.js
+++ b/packages/dropdown-menu/index.js
@@ -6,10 +6,13 @@ import { ClickOutsideMixin } from '../mixins/click-outside';
 const [sfc, bem] = use('dropdown-menu');
 
 export default sfc({
-  mixins: [ParentMixin('vanDropdownMenu'), ClickOutsideMixin({
-    event: 'click',
-    method: 'onClickOutside'
-  })],
+  mixins: [
+    ParentMixin('vanDropdownMenu'),
+    ClickOutsideMixin({
+      event: 'click',
+      method: 'onClickOutside'
+    })
+  ],
 
   props: {
     overlay: {
@@ -24,6 +27,10 @@ export default sfc({
       type: Number,
       default: 0.2
     },
+    direction: {
+      type: String,
+      default: 'down'
+    },
     activeColor: {
       type: String,
       default: BLUE
@@ -36,7 +43,7 @@ export default sfc({
 
   data() {
     return {
-      top: 0
+      offset: 0
     };
   },
 
@@ -44,7 +51,12 @@ export default sfc({
     toggleItem(active) {
       const { menu } = this.$refs;
       const rect = menu.getBoundingClientRect();
-      this.top = rect.bottom;
+
+      if (this.direction === 'down') {
+        this.offset = rect.bottom;
+      } else {
+        this.offset = window.innerHeight - rect.top;
+      }
 
       this.children.forEach((item, index) => {
         if (index === active) {
@@ -75,7 +87,12 @@ export default sfc({
         }}
       >
         <span
-          class={[bem('title', { active: item.show }), item.titleClass]}
+          class={[
+            bem('title', {
+              down: item.showPopup === (this.direction === 'down')
+            }),
+            item.titleClass
+          ]}
           style={{ color: item.showPopup ? this.activeColor : '' }}
         >
           {item.displayTitle}
diff --git a/packages/dropdown-menu/index.less b/packages/dropdown-menu/index.less
index a362c188b..1d92197bb 100644
--- a/packages/dropdown-menu/index.less
+++ b/packages/dropdown-menu/index.less
@@ -38,15 +38,14 @@
       border: 3px solid;
       border-color: transparent transparent currentColor currentColor;
       transform: rotate(-45deg);
-      opacity: .6;
+      opacity: .8;
       content: '';
     }
 
-    &--active {
+    &--down {
       &::after {
         top: 7px;
         transform: rotate(135deg);
-        opacity: 1;
       }
     }
   }
diff --git a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index b1c503b91..606a04400 100644
--- a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -6,10 +6,10 @@ exports[`renders demo correctly 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">全部商品</span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
     </div>
@@ -18,10 +18,22 @@ exports[`renders demo correctly 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">全部商品</span></div>
       <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <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">全部商品</span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</span></div>
+      <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
+        <!---->
+      </div>
+      <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
         <!---->
       </div>
     </div>
@@ -30,10 +42,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-dropdown-menu van-hairline--top-bottom">
       <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
       <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
-      <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+      <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
index e0c6ebdc1..a0c2a521b 100644
--- a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -4,8 +4,8 @@ exports[`click option 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">B</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2005;" name="van-popup-slide-top">
+  <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" style="transition-duration: 0.2s; display: none; z-index: 2009;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style=""><span>A</span></div>
       </div>
@@ -16,7 +16,30 @@ exports[`click option 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`close on click outside 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">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</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" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute;"></div>
+  </div>
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
 </div>
@@ -26,7 +49,7 @@ exports[`destroy one 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">A</span></div>
   <!---->
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
 </div>
@@ -36,10 +59,33 @@ exports[`didn\`t find matched option 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"></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`direction up 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">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
+    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute;"></div>
+  </div>
+  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
     <!---->
   </div>
 </div>
@@ -48,7 +94,7 @@ exports[`didn\`t find matched option 1`] = `
 exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
 </div>
@@ -56,9 +102,9 @@ exports[`disable dropdown item 1`] = `
 
 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" style="color: rgb(25, 137, 250);">A</span></div>
+  <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);">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
+  <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" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -71,7 +117,7 @@ exports[`show dropdown item 1`] = `
     </div>
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
   </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
 </div>
@@ -80,32 +126,9 @@ exports[`show dropdown item 1`] = `
 exports[`show dropdown item 2`] = `
 <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" style="">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable">
-        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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">
-        <div class="van-cell__title"><span>B</span></div>
-      </div>
-    </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div>
-  </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
-    <!---->
-  </div>
-</div>
-`;
-
-exports[`show dropdown item 3`] = `
-<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" style="">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+  <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);">A</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" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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);">
@@ -116,7 +139,7 @@ exports[`show dropdown item 3`] = `
       </div>
     </div>
   </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
+  <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" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -132,14 +155,46 @@ exports[`show dropdown item 3`] = `
 </div>
 `;
 
+exports[`show dropdown item 3`] = `
+<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" style="">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</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" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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">
+        <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;">
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+      <div class="van-cell van-cell--clickable">
+        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><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">
+        <div class="van-cell__title"><span>B</span></div>
+      </div>
+    </div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div>
+  </div>
+</div>
+`;
+
 exports[`title prop 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">Title</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
-  <div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
+  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
 </div>
diff --git a/packages/dropdown-menu/test/index.spec.js b/packages/dropdown-menu/test/index.spec.js
index d07862dfc..a57d579b0 100644
--- a/packages/dropdown-menu/test/index.spec.js
+++ b/packages/dropdown-menu/test/index.spec.js
@@ -5,7 +5,7 @@ import DropdownItem from '../../dropdown-item';
 function renderWrapper(options = {}) {
   return mount({
     template: `
-      <dropdown-menu>
+      <dropdown-menu :direction="direction">
         <dropdown-item v-model="value" :title="title" :options="options" />
         <dropdown-item v-model="value" :title="title" :options="options" />
       </dropdown-menu>
@@ -18,6 +18,7 @@ function renderWrapper(options = {}) {
       return {
         value: options.value || 0,
         title: options.title || '',
+        direction: options.direction || 'down',
         options: [
           { text: 'A', value: 0 },
           { text: 'B', value: 1 }
@@ -37,13 +38,38 @@ test('show dropdown item', async () => {
   titles.at(0).trigger('click');
   expect(wrapper).toMatchSnapshot();
 
-  titles.at(0).trigger('click');
+  titles.at(1).trigger('click');
   expect(wrapper).toMatchSnapshot();
 
   titles.at(1).trigger('click');
   expect(wrapper).toMatchSnapshot();
 });
 
+test('close on click outside', async () => {
+  const wrapper = renderWrapper();
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles.at(0).trigger('click');
+  document.body.click();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('direction up', async () => {
+  const wrapper = renderWrapper({
+    direction: 'up'
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+
+  titles.at(0).trigger('click');
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('click option', async () => {
   const wrapper = renderWrapper();
 
diff --git a/packages/dropdown-menu/zh-CN.md b/packages/dropdown-menu/zh-CN.md
index 8c9df5853..6c79b60ae 100644
--- a/packages/dropdown-menu/zh-CN.md
+++ b/packages/dropdown-menu/zh-CN.md
@@ -78,6 +78,17 @@ export default {
 };
 ```
 
+### 向上展开
+
+将`direction`属性值设置为`up`，菜单即可向上展开
+
+```html
+<van-dropdown-menu direction="up">
+  <van-dropdown-item v-model="value1" :options="option1" />
+  <van-dropdown-item v-model="value2" :options="option2" />
+</van-dropdown-menu>
+```
+
 ### 禁用菜单
 
 ```html
@@ -96,6 +107,7 @@ export default {
 | active-color | 菜单标题和选项的选中态颜色 | `String` | `#1989fa` | - |
 | z-index | 菜单栏 z-index 层级 | `Number` | `10` | - |
 | duration | 动画时长，单位秒 | `Number` | `0.2` | 2.0.0 |
+| direction | 菜单展开方向，可选值为`up` | `String` | `down` | 2.0.1 |
 | overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
 | close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | `Boolean` | `true` | - |