From 407eabd5c3d8472dde4b6431feef2be8a2ab50ef Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Sun, 4 Dec 2016 17:04:48 +0800
Subject: [PATCH] update Dropdown

---
 src/components/dropdown/dropdown-item.vue |   1 +
 src/components/dropdown/dropdown.vue      |  33 +++++++++++++++++++++++----------
 test/routers/dropdown.vue                 | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------
 3 files changed, 126 insertions(+), 84 deletions(-)

diff --git a/src/components/dropdown/dropdown-item.vue b/src/components/dropdown/dropdown-item.vue
index a626cb6..4265775 100644
--- a/src/components/dropdown/dropdown-item.vue
+++ b/src/components/dropdown/dropdown-item.vue
@@ -38,6 +38,7 @@
             handleClick () {
                 const $parent = this.$parent.$parent;
                 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
+
                 if (this.disabled) {
                     this.$nextTick(() => {
                         $parent.visible = true;
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index ea23eb2..8c3ef5f 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -1,12 +1,14 @@
 <template>
     <div
         :class="[prefixCls]"
-        @click="handleClick"
+        v-clickoutside="handleClose"
         @mouseenter="handleMouseenter"
-        @mouseleave="handleMouseleave"
-        v-clickoutside="handleClose">
-        <div :class="[prefixCls-rel]" v-el:reference><slot></slot></div>
-        <Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop>
+        @mouseleave="handleMouseleave">
+        <div
+            :class="[prefixCls-rel]"
+            v-el:reference
+            @click="handleClick"><slot></slot></div>
+        <Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
     </div>
 </template>
 <script>
@@ -34,6 +36,11 @@
                 default: 'bottom'
             }
         },
+        computed: {
+            transition () {
+                return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
+            }
+        },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -92,14 +99,20 @@
         events: {
             'on-click' (key) {
                 const $parent = this.hasParent();
-                if ($parent ) $parent.$emit('on-click', key)
+                if ($parent ) $parent.$emit('on-click', key);
             },
             'on-hover-click' () {
-                this.$nextTick(() => {
-                    this.visible = false;
-                });
                 const $parent = this.hasParent();
-                if ($parent) $parent.$emit('on-hover-click');
+                if ($parent) {
+                    this.$nextTick(() => {
+                        this.visible = false;
+                    });
+                    $parent.$emit('on-hover-click');
+                } else {
+                    this.$nextTick(() => {
+                        this.visible = false;
+                    });
+                }
             },
             'on-haschild-click' () {
                 this.$nextTick(() => {
diff --git a/test/routers/dropdown.vue b/test/routers/dropdown.vue
index 07a17b0..be3cf61 100644
--- a/test/routers/dropdown.vue
+++ b/test/routers/dropdown.vue
@@ -1,78 +1,106 @@
 <template>
-    <Dropdown trigger="hover" @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 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>
-    </Dropdown>
-    <Dropdown trigger="click" @on-click="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>
-    </Dropdown>
+    <Card>
+        <Dropdown>
+            <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-item>炸酱面</Dropdown-item>
+                <Dropdown-item>豆汁儿</Dropdown-item>
+                <Dropdown-item>冰糖葫芦</Dropdown-item>
+                <Dropdown-item>北京烤鸭</Dropdown-item>
+            </Dropdown-menu>
+        </Dropdown>
+        <Dropdown trigger="hover" @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 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>
+        </Dropdown>
+        <Dropdown trigger="click" @on-click="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>
+        </Dropdown>
+    </Card>
 </template>
 <script>
     export default {
--
libgit2 0.21.4