update Dropdown

update Dropdown

src/components/dropdown/dropdown.vue

@@ -6,7 +6,7 @@
         @mouseleave="handleMouseleave"
         v-clickoutside="handleClose">
         <div :class="[prefixCls-rel]" v-el:reference><slot></slot></div>
-        <Drop v-show="visible" :placement="placement" transition="slide-up"><slot name="list"></slot></Drop>
+        <Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop>
     </div>
 </template>
 <script>
@@ -17,6 +17,7 @@
     const prefixCls = 'ivu-dropdown';
 
     export default {
+        name: 'Dropdown',
         directives: { clickoutside },
         components: { Drop },
         props: {
@@ -26,11 +27,11 @@
                 },
                 default: 'hover'
             },
-            align: {
+            placement: {
                 validator (value) {
-                    return oneOf(value, ['left', 'center', 'right']);
+                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
                 },
-                default: 'center'
+                default: 'bottom'
             }
         },
         data () {
@@ -39,11 +40,6 @@
                 visible: false
             }
         },
-        computed: {
-            placement () {
-                return this.align === 'left' ? 'bottom-start' : this.align === 'center' ? 'bottom' : 'bottom-end';
-            }
-        },
         methods: {
             handleClick () {
                 if (this.trigger !== 'click') {
@@ -79,9 +75,17 @@
         watch: {
             visible (val) {
                 if (val) {
-                    this.$broadcast('on-update-popper');
+                    this.$refs.drop.update();
                 } else {
-                    this.$broadcast('on-destroy-popper');
+                    this.$refs.drop.destroy();
+                }
+            }
+        },
+        events: {
+            'on-click' (key) {
+                const $parent = this.$parent.$parent;
+                if ($parent && $parent.$options.name === 'Dropdown') {
+                    $parent.$emit('on-click', key);
                 }
             }
         }

src/styles/components/dropdown.less

@@ -5,6 +5,13 @@
     display: inline-block;
     position: relative;
 
+    .@{select-dropdown-prefix-cls} {
+        overflow: visible;
+    }
+    .@{dropdown-prefix-cls} {
+        width: 100%;
+    }
+
     &-rel{
         display: inline-block;
     }

test/routers/dropdown.vue

@@ -1,26 +1,37 @@
 <template>
-    <Dropdown>
+    <Dropdown trigger="click" @on-click="click" style="margin-left: 20px">
-        <a href="javascript:void(0)">
-            hover 触发
-            <Icon type="arrow-down-b"></Icon>
-        </a>
-        <Dropdown-menu slot="list">
-            <Dropdown-item>驴打滚</Dropdown-item>
-            <Dropdown-item>炸酱面</Dropdown-item>
-            <Dropdown-item>豆汁儿</Dropdown-item>
-            <Dropdown-item>冰糖葫芦</Dropdown-item>
-            <Dropdown-item>北京烤鸭</Dropdown-item>
-        </Dropdown-menu>
-    </Dropdown>
-    <Dropdown trigger="click" style="margin-left: 20px">
         <a href="javascript:void(0)">
             click 触发
             <Icon type="arrow-down-b"></Icon>
         </a>
+        <Dropdown-menu slot="list">
+            <Dropdown-item>驴打滚</Dropdown-item>
+            <Dropdown placement="right-start">
+                <Dropdown-item>
+                    炸酱面
+                    <Icon type="arrow-right-b"></Icon>
+                </Dropdown-item>
                 <Dropdown-menu slot="list">
                     <Dropdown-item>驴打滚</Dropdown-item>
                     <Dropdown-item>炸酱面</Dropdown-item>
                     <Dropdown-item>豆汁儿</Dropdown-item>
+                    <Dropdown placement="right-start">
+                        <Dropdown-item>
+                            冰糖葫芦
+                            <Icon type="arrow-right-b"></Icon>
+                        </Dropdown-item>
+                        <Dropdown-menu slot="list">
+                            <Dropdown-item>驴打滚</Dropdown-item>
+                            <Dropdown-item key="123">炸酱面</Dropdown-item>
+                            <Dropdown-item>豆汁儿</Dropdown-item>
+                            <Dropdown-item>冰糖葫芦</Dropdown-item>
+                            <Dropdown-item>北京烤鸭</Dropdown-item>
+                        </Dropdown-menu>
+                    </Dropdown>
+                    <Dropdown-item>北京烤鸭</Dropdown-item>
+                </Dropdown-menu>
+            </Dropdown>
+            <Dropdown-item>豆汁儿</Dropdown-item>
             <Dropdown-item>冰糖葫芦</Dropdown-item>
             <Dropdown-item>北京烤鸭</Dropdown-item>
         </Dropdown-menu>
@@ -28,6 +39,10 @@
 </template>
 <script>
     export default {
-
+        methods: {
+            click (data) {
+                console.log(data)
+            }
+        }
     }
 </script>