support Dropdown

support Dropdown

CHANGE.md

@@ -28,4 +28,9 @@ class 改为了 className
 改名为 iCircle
 ### Tabs
 废弃 activeKey，改用 value，使用 v-model，key 更名为 name
-### popper.js 将 prop: visible 移至 data 里
+### popper.js 将 prop: visible 移至 data 里
+### Slider
+支持 v-model
+### Dropdown
+DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync
+DropdownItem 里，this.$parent.$parent 与1.0 有区别

README.md

@@ -26,7 +26,7 @@
 - [x] Switch
 - [ ] Table
 - [ ] Select
-- [ ] Slider
+- [x] Slider
 - [ ] DatePicker
 - [ ] TimePicker
 - [ ] Cascader
@@ -51,7 +51,7 @@
 - [x] Tree
 - [ ] Menu
 - [x] Tabs
-- [ ] Dropdown
+- [x] Dropdown
 - [ ] Page
 - [ ] Breadcrumb
 - [x] Steps

src/components/dropdown/dropdown-item.vue

@@ -5,8 +5,9 @@
     const prefixCls = 'ivu-dropdown-item';
 
     export default {
+        name: 'DropdownItem',
         props: {
-            key: {
+            name: {
                 type: [String, Number]
             },
             disabled: {
@@ -36,7 +37,7 @@
         },
         methods: {
             handleClick () {
-                const $parent = this.$parent.$parent;
+                const $parent = this.$parent.$parent.$parent;
                 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
 
                 if (this.disabled) {
@@ -50,7 +51,7 @@
                         $parent.$emit('on-hover-click');
                     }
                 }
-                $parent.$emit('on-click', this.key);
+                $parent.$emit('on-click', this.name);
             }
         }
     };

src/components/dropdown/dropdown.vue

@@ -4,8 +4,10 @@
         v-clickoutside="handleClose"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
-        <div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
+        <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
-        <Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
+        <transition :name="transition">
+            <Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
+        </transition>
     </div>
 </template>
 <script>
@@ -44,16 +46,30 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                currentVisible: this.visible
             };
         },
+        watch: {
+            visible (val) {
+                this.currentVisible = val;
+            },
+            currentVisible (val) {
+                if (val) {
+                    this.$refs.drop.update();
+                } else {
+                    this.$refs.drop.destroy();
+                }
+                this.$emit('on-visible-change', val);
+            }
+        },
         methods: {
             handleClick () {
                 if (this.trigger === 'custom') return false;
                 if (this.trigger !== 'click') {
                     return false;
                 }
-                this.visible = !this.visible;
+                this.currentVisible = !this.currentVisible;
             },
             handleMouseenter () {
                 if (this.trigger === 'custom') return false;
@@ -62,7 +78,7 @@
                 }
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.visible = true;
+                    this.currentVisible = true;
                 }, 250);
             },
             handleMouseleave () {
@@ -72,7 +88,7 @@
                 }
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.visible = false;
+                    this.currentVisible = false;
                 }, 150);
             },
             handleClose () {
@@ -80,7 +96,7 @@
                 if (this.trigger !== 'click') {
                     return false;
                 }
-                this.visible = false;
+                this.currentVisible = false;
             },
             hasParent () {
                 const $parent = this.$parent.$parent;
@@ -91,44 +107,63 @@
                 }
             }
         },
-        watch: {
+        mounted () {
-            visible (val) {
+            this.$on('on-click', (key) => {
-                if (val) {
-                    this.$refs.drop.update();
-                } else {
-                    this.$refs.drop.destroy();
-                }
-                this.$emit('on-visible-change', val);
-            }
-        },
-        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.$on('on-hover-click', () => {
                 const $parent = this.hasParent();
                 if ($parent) {
                     this.$nextTick(() => {
                         if (this.trigger === 'custom') return false;
-                        this.visible = false;
+                        this.currentVisible = false;
                     });
                     $parent.$emit('on-hover-click');
                 } else {
                     this.$nextTick(() => {
                         if (this.trigger === 'custom') return false;
-                        this.visible = false;
+                        this.currentVisible = false;
                     });
                 }
-            },
+            });
-            'on-haschild-click' () {
+            this.$on('on-haschild-click', () => {
                 this.$nextTick(() => {
                     if (this.trigger === 'custom') return false;
-                    this.visible = true;
+                    this.currentVisible = true;
                 });
                 const $parent = this.hasParent();
                 if ($parent) $parent.$emit('on-haschild-click');
-            }
+            });
-        }
+        },
+//        events: {
+//            'on-click' (key) {
+//                const $parent = this.hasParent();
+//                if ($parent ) $parent.$emit('on-click', key);
+//            },
+//            'on-hover-click' () {
+//                const $parent = this.hasParent();
+//                if ($parent) {
+//                    this.$nextTick(() => {
+//                        if (this.trigger === 'custom') return false;
+//                        this.currentVisible = false;
+//                    });
+//                    $parent.$emit('on-hover-click');
+//                } else {
+//                    this.$nextTick(() => {
+//                        if (this.trigger === 'custom') return false;
+//                        this.currentVisible = false;
+//                    });
+//                }
+//            },
+//            'on-haschild-click' () {
+//                this.$nextTick(() => {
+//                    if (this.trigger === 'custom') return false;
+//                    this.currentVisible = true;
+//                });
+//                const $parent = this.hasParent();
+//                if ($parent) $parent.$emit('on-haschild-click');
+//            }
+//        }
     };
 </script>

src/components/select/dropdown.vue

@@ -15,7 +15,7 @@
         data () {
             return {
                 popper: null,
-                width: '',
+                width: ''
             };
         },
         computed: {
@@ -33,7 +33,7 @@
                     });
                 } else {
                     this.$nextTick(() => {
-                        this.popper = new Popper(this.$parent.$els.reference, this.$el, {
+                        this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
                             gpuAcceleration: false,
                             placement: this.placement,
                             boundariesPadding: 0,
@@ -66,7 +66,7 @@
                 popper._popper.style.transformOrigin = `center ${ origin }`;
             }
         },
-        compiled () {
+        created () {
             this.$on('on-update-popper', this.update);
             this.$on('on-destroy-popper', this.destroy);
         },

src/components/slider/slider.vue

@@ -52,6 +52,7 @@
     const prefixCls = 'ivu-slider';
 
     export default {
+        name: 'Slider',
         components: { InputNumber, Tooltip },
         props: {
             min: {

src/index.js

@@ -14,7 +14,7 @@ import Checkbox from './components/checkbox';
 import Circle from './components/circle';
 import Collapse from './components/collapse';
 // import DatePicker from './components/date-picker';
-// import Dropdown from './components/dropdown';
+import Dropdown from './components/dropdown';
 // import Form from './components/form';
 import Icon from './components/icon';
 import Input from './components/input';
@@ -64,9 +64,9 @@ const iview = {
     CheckboxGroup: Checkbox.Group,
     iCircle: Circle,
     // DatePicker,
-    // Dropdown,
+    Dropdown,
-    // DropdownItem: Dropdown.Item,
+    DropdownItem: Dropdown.Item,
-    // DropdownMenu: Dropdown.Menu,
+    DropdownMenu: Dropdown.Menu,
     // iForm: Form,
     // FormItem: Form.Item,
     iCol: Col,

test/app.vue

@@ -38,6 +38,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/tooltip">Tooltip</router-link></li>
                 <li><router-link to="/poptip">Poptip</router-link></li>
                 <li><router-link to="/slider">Slider</router-link></li>
+                <li><router-link to="/dropdown">Dropdown</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -116,6 +116,10 @@ const router = new VueRouter({
         {
             path: '/slider',
             component: require('./routers/slider.vue')
+        },
+        {
+            path: '/dropdown',
+            component: require('./routers/dropdown.vue')
         }
     ]
 });

test/routers/dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <Dropdown trigger="click">
+    <Dropdown>
         <a href="javascript:void(0)">
             北京小吃
             <Icon type="arrow-down-b"></Icon>
@@ -24,10 +24,6 @@
 </template>
 <script>
     export default {
-        methods: {
+
-            v (data) {
-                console.log(data)
-            }
-        }
     }
 </script>