add Dropdown component

add Dropdown component

src/components/dropdown/dropdown-item.vue

@@ -0,0 +1,50 @@
+<template>
+    <li :class="classes" @click="handleClick"><slot></slot></li>
+</template>
+<script>
+    const prefixCls = 'ivu-dropdown-item';
+
+    export default {
+        props: {
+            key: {
+                type: [String, Number]
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            selected: {
+                type: Boolean,
+                default: false
+            },
+            divided: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-selected`]: this.selected,
+                        [`${prefixCls}-divided`]: this.divided
+                    }
+                ]
+            }
+        },
+        methods: {
+            handleClick () {
+                if (this.disabled) {
+                    this.$nextTick(() => {
+                        this.$parent.$parent.visible = true;
+                    });
+                } else {
+                    this.$parent.$parent.visible = false;
+                }
+                this.$parent.$parent.$emit('on-click', this.key);
+            }
+        }
+    }
+</script>

src/components/dropdown/dropdown-menu.vue

@@ -0,0 +1,6 @@
+<template>
+    <ul class="ivu-dropdown-menu"><slot></slot></ul>
+</template>
+<script>
+    export default {}
+</script>

src/components/dropdown/dropdown.vue

@@ -0,0 +1,89 @@
+<template>
+    <div
+        :class="[prefixCls]"
+        @click="handleClick"
+        @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"><slot name="list"></slot></Drop>
+    </div>
+</template>
+<script>
+    import Drop from '../select/dropdown.vue';
+    import clickoutside from '../../directives/clickoutside';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-dropdown';
+
+    export default {
+        directives: { clickoutside },
+        components: { Drop },
+        props: {
+            trigger: {
+                validator (value) {
+                    return oneOf(value, ['click', 'hover']);
+                },
+                default: 'hover'
+            },
+            align: {
+                validator (value) {
+                    return oneOf(value, ['left', 'center', 'right']);
+                },
+                default: 'center'
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                visible: false
+            }
+        },
+        computed: {
+            placement () {
+                return this.align === 'left' ? 'bottom-start' : this.align === 'center' ? 'bottom' : 'bottom-end';
+            }
+        },
+        methods: {
+            handleClick () {
+                if (this.trigger !== 'click') {
+                    return false;
+                }
+                this.visible = !this.visible;
+            },
+            handleMouseenter () {
+                if (this.trigger !== 'hover') {
+                    return false;
+                }
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.visible = true;
+                }, 250);
+            },
+            handleMouseleave () {
+                if (this.trigger !== 'hover') {
+                    return false;
+                }
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.visible = false;
+                }, 150);
+            },
+            handleClose () {
+                if (this.trigger !== 'click') {
+                    return false;
+                }
+                this.visible = false;
+            }
+        },
+        watch: {
+            visible (val) {
+                if (val) {
+                    this.$broadcast('on-update-popper');
+                } else {
+                    this.$broadcast('on-destroy-popper');
+                }
+            }
+        }
+    }
+</script>

src/components/dropdown/index.js

@@ -0,0 +1,7 @@
+import Dropdown from './dropdown.vue';
+import DropdownMenu from './dropdown-menu.vue';
+import DropdownItem from './dropdown-item.vue';
+
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
+export default Dropdown;