support dropdown placement

examples/docs/en-US/dropdown.md

@@ -207,7 +207,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 | size          | menu button size, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
 | size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
-| menu-align    | horizontal alignment     | string          | start/end  | end |
+| placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
 

examples/docs/zh-CN/dropdown.md

@@ -207,7 +207,7 @@
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
 | size          | 菜单按钮尺寸，同 Button 组件(只在`split-button`为 true 的情况下有效)     | string          | — | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
-| menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
+| placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
 | hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
 

packages/dropdown/src/dropdown-menu.vue

@@ -15,6 +15,14 @@
 
     mixins: [Popper],
 
+    data() {
+      return {
+        placement: this.dropdown.placement
+      };
+    },
+
+    inject: ['dropdown'],
+
     created() {
       this.$on('updatePopper', () => {
         if (this.showPopper) this.updatePopper();
@@ -30,10 +38,10 @@
     },
 
     watch: {
-      '$parent.menuAlign': {
+      'dropdown.placement': {
         immediate: true,
         handler(val) {
-          this.currentPlacement = `bottom-${val}`;
+          this.currentPlacement = val;
         }
       }
     }

packages/dropdown/src/dropdown.vue

@@ -18,21 +18,27 @@
       ElButtonGroup
     },
 
+    provide() {
+      return {
+        dropdown: this
+      };
+    },
+
     props: {
       trigger: {
         type: String,
         default: 'hover'
       },
-      menuAlign: {
-        type: String,
-        default: 'end'
-      },
       type: String,
       size: String,
       splitButton: Boolean,
       hideOnClick: {
         type: Boolean,
         default: true
+      },
+      placement: {
+        type: String,
+        default: 'bottom-end'
       }
     },
 
@@ -100,14 +106,14 @@
     render(h) {
       let { hide, splitButton, type, size } = this;
 
-      var handleClick = _ => {
-        this.$emit('click');
+      var handleMainButtonClick = (event) => {
+        this.$emit('click', event);
       };
 
       let triggerElm = !splitButton
         ? this.$slots.default
         : (<el-button-group>
-            <el-button type={type} size={size} nativeOn-click={handleClick}>
+            <el-button type={type} size={size} nativeOn-click={handleMainButtonClick}>
               {this.$slots.default}
             </el-button>
             <el-button ref="trigger" type={type} size={size} class="el-dropdown__caret-button">