support Menu & Layout

support Menu & Layout

CHANGE.md

@@ -36,3 +36,6 @@ class 改为了 className
 ### Dropdown
 DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync
 DropdownItem 里，this.$parent.$parent 与1.0 有区别
+### Menu
+MenuItem 和 Submenu 的 key 改为了 name
+Menu 的 activeKey 改为 activeName,openKeys 改为 openNames

README.md

@@ -17,7 +17,7 @@
 
 ## Programming
 - [x] Grid
-- [ ] Layout
+- [x] Layout
 - [x] Button
 - [x] Icon
 - [x] Input
@@ -49,7 +49,7 @@
 - [x] Poptip
 - [x] Carousel
 - [x] Tree
-- [ ] Menu
+- [x] Menu
 - [x] Tabs
 - [x] Dropdown
 - [ ] Page

examples/app.vue

@@ -40,6 +40,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/slider">Slider</router-link></li>
                 <li><router-link to="/dropdown">Dropdown</router-link></li>
                 <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
+                <li><router-link to="/menu">Menu</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

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

examples/routers/menu.vue

@@ -1,48 +1,189 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--<Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="s">-->
+            <!--<Menu-item name="1">-->
+                <!--<Icon type="ios-paper"></Icon>-->
+                <!--内容管理-->
+            <!--</Menu-item>-->
+            <!--<Menu-item name="2">-->
+                <!--<Icon type="ios-people"></Icon>-->
+                <!--用户管理-->
+            <!--</Menu-item>-->
+            <!--<Submenu name="3">-->
+                <!--<template slot="title">-->
+                    <!--<Icon type="stats-bars"></Icon>-->
+                    <!--统计分析-->
+                <!--</template>-->
+                <!--<Menu-group title="使用">-->
+                    <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
+                    <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
+                    <!--<Menu-item name="3-3">时段分析</Menu-item>-->
+                <!--</Menu-group>-->
+                <!--<Menu-group title="留存">-->
+                    <!--<Menu-item name="3-4">用户留存</Menu-item>-->
+                    <!--<Menu-item name="3-5">流失用户</Menu-item>-->
+                <!--</Menu-group>-->
+            <!--</Submenu>-->
+            <!--<Menu-item name="4">-->
+                <!--<Icon type="settings"></Icon>-->
+                <!--综合设置-->
+            <!--</Menu-item>-->
+        <!--</Menu>-->
+        <!--<br>-->
+        <!--<p>切换主题</p>-->
+        <!--<Radio-group v-model="theme1">-->
+            <!--<Radio label="light"></Radio>-->
+            <!--<Radio label="dark"></Radio>-->
+            <!--<Radio label="primary"></Radio>-->
+        <!--</Radio-group>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--theme1: 'light'-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--s (s) {-->
+                <!--console.log(s)-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+
 <template>
-    <Menu mode="horizontal" :theme="theme1" :active-key.sync="ak">
+    <div>
-        <Menu-item key="1">
+        <Row>
+            <i-col span="8">
+                <Menu :theme="theme2" @on-select="s">
+                    <Submenu name="1">
+                        <template slot="title">
                             <Icon type="ios-paper"></Icon>
                             内容管理
-        </Menu-item>
+                        </template>
-        <Menu-item key="2">
+                        <Menu-item name="1-1">文章管理</Menu-item>
+                        <Menu-item name="1-2">评论管理</Menu-item>
+                        <Menu-item name="1-3">举报管理</Menu-item>
+                    </Submenu>
+                    <Submenu name="2">
+                        <template slot="title">
                             <Icon type="ios-people"></Icon>
                             用户管理
-        </Menu-item>
+                        </template>
-        <Submenu key="3">
+                        <Menu-item name="2-1">新增用户</Menu-item>
+                        <Menu-item name="2-2">活跃用户</Menu-item>
+                    </Submenu>
+                    <Submenu name="3">
                         <template slot="title">
                             <Icon type="stats-bars"></Icon>
                             统计分析
                         </template>
                         <Menu-group title="使用">
-                <Menu-item key="3-1">新增和启动</Menu-item>
+                            <Menu-item name="3-1">新增和启动</Menu-item>
-                <Menu-item key="3-2">活跃分析</Menu-item>
+                            <Menu-item name="3-2">活跃分析</Menu-item>
-                <Menu-item key="3-3">时段分析</Menu-item>
+                            <Menu-item name="3-3">时段分析</Menu-item>
                         </Menu-group>
                         <Menu-group title="留存">
-                <Menu-item key="3-4">用户留存</Menu-item>
+                            <Menu-item name="3-4">用户留存</Menu-item>
-                <Menu-item key="3-5">流失用户</Menu-item>
+                            <Menu-item name="3-5">流失用户</Menu-item>
                         </Menu-group>
                     </Submenu>
-        <Menu-item key="4">
-            <Icon type="settings"></Icon>
-            综合设置
-        </Menu-item>
                 </Menu>
+            </i-col>
+            <i-col span="8">
+                <Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">
+                    <Submenu name="1">
+                        <template slot="title">
+                            <Icon type="ios-paper"></Icon>
+                            内容管理
+                        </template>
+                        <Menu-item name="1-1">文章管理</Menu-item>
+                        <Menu-item name="1-2">评论管理</Menu-item>
+                        <Menu-item name="1-3">举报管理</Menu-item>
+                    </Submenu>
+                    <Submenu name="2">
+                        <template slot="title">
+                            <Icon type="ios-people"></Icon>
+                            用户管理
+                        </template>
+                        <Menu-item name="2-1">新增用户</Menu-item>
+                        <Menu-item name="2-2">活跃用户</Menu-item>
+                    </Submenu>
+                    <Submenu name="3">
+                        <template slot="title">
+                            <Icon type="stats-bars"></Icon>
+                            统计分析
+                        </template>
+                        <Menu-group title="使用">
+                            <Menu-item name="3-1">新增和启动</Menu-item>
+                            <Menu-item name="3-2">活跃分析</Menu-item>
+                            <Menu-item name="3-3">时段分析</Menu-item>
+                        </Menu-group>
+                        <Menu-group title="留存">
+                            <Menu-item name="3-4">用户留存</Menu-item>
+                            <Menu-item name="3-5">流失用户</Menu-item>
+                        </Menu-group>
+                    </Submenu>
+                </Menu>
+            </i-col>
+            <i-col span="8">
+                <Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">
+                    <Submenu name="1">
+                        <template slot="title">
+                            <Icon type="ios-paper"></Icon>
+                            内容管理
+                        </template>
+                        <Menu-item name="1-1">文章管理</Menu-item>
+                        <Menu-item name="1-2">评论管理</Menu-item>
+                        <Menu-item name="1-3">举报管理</Menu-item>
+                    </Submenu>
+                    <Submenu name="2">
+                        <template slot="title">
+                            <Icon type="ios-people"></Icon>
+                            用户管理
+                        </template>
+                        <Menu-item name="2-1">新增用户</Menu-item>
+                        <Menu-item name="2-2">活跃用户</Menu-item>
+                    </Submenu>
+                    <Submenu name="3">
+                        <template slot="title">
+                            <Icon type="stats-bars"></Icon>
+                            统计分析
+                        </template>
+                        <Menu-group title="使用">
+                            <Menu-item name="3-1">新增和启动</Menu-item>
+                            <Menu-item name="3-2">活跃分析</Menu-item>
+                            <Menu-item name="3-3">时段分析</Menu-item>
+                        </Menu-group>
+                        <Menu-group title="留存">
+                            <Menu-item name="3-4">用户留存</Menu-item>
+                            <Menu-item name="3-5">流失用户</Menu-item>
+                        </Menu-group>
+                    </Submenu>
+                </Menu>
+            </i-col>
+        </Row>
         <br>
         <p>切换主题</p>
-    <Radio-group :model.sync="theme1">
+        <Radio-group v-model="theme2">
-        <Radio value="light"></Radio>
+            <Radio label="light"></Radio>
-        <Radio value="dark"></Radio>
+            <Radio label="dark"></Radio>
-        <Radio value="primary"></Radio>
         </Radio-group>
-    <i-button @click="ak = '2'">change</i-button>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                theme1: 'light',
+                theme2: 'light'
-                ak: '1'
+            }
+        },
+        methods: {
+            s (s) {
+                console.log(s);
             }
         }
     }

src/components/menu/menu-item.vue

@@ -2,12 +2,14 @@
     <li :class="classes" @click.stop="handleClick"><slot></slot></li>
 </template>
 <script>
+    import Emitter from '../../mixins/emitter';
     const prefixCls = 'ivu-menu';
 
     export default {
         name: 'MenuItem',
+        mixins: [ Emitter ],
         props: {
-            key: {
+            name: {
                 type: [String, Number],
                 required: true
             },
@@ -36,8 +38,30 @@
         methods: {
             handleClick () {
                 if (this.disabled) return;
-                this.$dispatch('on-menu-item-select', this.key);
+
+                let parent = this.$parent;
+                let name = parent.$options.name;
+                while (parent && (!name || name !== 'Submenu')) {
+                    parent = parent.$parent;
+                    if (parent) name = parent.$options.name;
                 }
+
+                if (parent) {
+                    this.dispatch('Submenu', 'on-menu-item-select', this.name);
+                } else {
+                    this.dispatch('Menu', 'on-menu-item-select', this.name);
+                }
+            }
+        },
+        mounted () {
+            this.$on('on-update-active-name', (name) => {
+                if (this.name === name) {
+                    this.active = true;
+                    this.dispatch('Submenu', 'on-update-active-name', true);
+                } else {
+                    this.active = false;
+                }
+            });
         }
     };
 </script>

src/components/menu/menu.vue

@@ -3,10 +3,13 @@
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
+    import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-menu';
 
     export default {
+        name: 'Menu',
+        mixins: [ Emitter ],
         props: {
             mode: {
                 validator (value) {
@@ -20,10 +23,10 @@
                 },
                 default: 'light'
             },
-            activeKey: {
+            activeName: {
                 type: [String, Number]
             },
-            openKeys: {
+            openNames: {
                 type: Array,
                 default () {
                     return [];
@@ -38,6 +41,11 @@
                 default: '240px'
             }
         },
+        data () {
+            return {
+                currentActiveName: this.activeName
+            };
+        },
         computed: {
             classes () {
                 let theme = this.theme;
@@ -60,74 +68,46 @@
             }
         },
         methods: {
-            updateActiveKey () {
+            updateActiveName () {
-                this.$children.forEach((item, index) => {
+                if (!this.currentActiveName) {
-                    if (!this.activeKey && index === 0) {
+                    this.currentActiveName = -1;
-                        this.activeKey = -1;
                 }
-
+                this.broadcast('Submenu', 'on-update-active-name', false);
-                    if (item.$options.name === 'Submenu') {
+                this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
-                        item.active = false;
-                        item.$children.forEach(subitem => {
-                            if (subitem.$options.name === 'MenuGroup') {
-                                subitem.$children.forEach(groupItem => {
-                                    if (groupItem.key === this.activeKey) {
-                                        groupItem.active = true;
-                                        groupItem.$parent.$parent.active = true;
-                                    } else {
-                                        groupItem.active = false;
-                                    }
-                                });
-                            } else if (subitem.$options.name === 'MenuItem') {
-                                if (subitem.key === this.activeKey) {
-                                    subitem.active = true;
-                                    subitem.$parent.active = true;
-                                } else {
-                                    subitem.active = false;
-                                }
-                            }
-                        });
-                    } else if (item.$options.name === 'MenuGroup') {
-                        item.$children.forEach(groupItem => {
-                            groupItem.active = groupItem.key === this.activeKey;
-                        });
-                    } else if (item.$options.name === 'MenuItem') {
-                        item.active = item.key === this.activeKey;
-                    }
-                });
             },
-            updateOpenKeys (key) {
+            updateOpenKeys (name) {
-                const index = this.openKeys.indexOf(key);
+                const index = this.openNames.indexOf(name);
                 if (index > -1) {
-                    this.openKeys.splice(index, 1);
+                    this.openNames.splice(index, 1);
                 } else {
-                    this.openKeys.push(key);
+                    this.openNames.push(name);
                 }
             },
             updateOpened () {
                 this.$children.forEach(item => {
                     if (item.$options.name === 'Submenu') {
-                        if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
+                        if (this.openNames.indexOf(item.name) > -1) item.opened = true;
                     }
                 });
             }
         },
-        compiled () {
+        mounted () {
-            this.updateActiveKey();
+            this.updateActiveName();
             this.updateOpened();
-        },
+            this.$on('on-menu-item-select', (name) => {
-        events: {
+                this.currentActiveName = name;
-            'on-menu-item-select' (key) {
+                this.$emit('on-select', name);
-                this.activeKey = key;
+            });
-                this.$emit('on-select', key);
-            }
         },
         watch: {
-            openKeys () {
+            openNames () {
-                this.$emit('on-open-change', this.openKeys);
+                this.$emit('on-open-change', this.openNames);
             },
-            activeKey () {
+            activeName (val) {
-                this.updateActiveKey();
+                this.currentActiveName = val;
+            },
+            currentActiveName () {
+                this.updateActiveName();
             }
         }
     };

src/components/menu/submenu.vue

@@ -1,31 +1,33 @@
 <template>
     <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-        <div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
+        <div :class="[prefixCls + '-submenu-title']" ref="reference" @click="handleClick">
             <slot name="title"></slot>
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
         <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
+        <transition name="slide-up" v-else>
             <Drop
-            v-else
                 v-show="opened"
                 placement="bottom"
-            transition="slide-up"
+                ref="drop"
-            v-ref:drop
                 :style="dropStyle"><slot></slot></Drop>
+        </transition>
     </li>
 </template>
 <script>
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
     import { getStyle } from '../../utils/assist';
+    import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-menu';
 
     export default {
         name: 'Submenu',
+        mixins: [ Emitter ],
         components: { Icon, Drop },
         props: {
-            key: {
+            name: {
                 type: [String, Number],
                 required: true
             },
@@ -54,9 +56,11 @@
                 ];
             },
             mode () {
+                // todo while
                 return this.$parent.mode;
             },
             accordion () {
+                // todo while
                 return this.$parent.accordion;
             },
             dropStyle () {
@@ -73,7 +77,8 @@
 
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.$parent.updateOpenKeys(this.key);
+                    // todo while
+                    this.$parent.updateOpenKeys(this.name);
                     this.opened = true;
                 }, 250);
             },
@@ -83,7 +88,8 @@
 
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
-                    this.$parent.updateOpenKeys(this.key);
+                    // todo while
+                    this.$parent.updateOpenKeys(this.name);
                     this.opened = false;
                 }, 150);
             },
@@ -92,12 +98,14 @@
                 if (this.mode === 'horizontal') return;
                 const opened = this.opened;
                 if (this.accordion) {
+                    // todo while
                     this.$parent.$children.forEach(item => {
                         if (item.$options.name === 'Submenu') item.opened = false;
                     });
                 }
                 this.opened = !opened;
-                this.$parent.updateOpenKeys(this.key);
+                // todo while
+                this.$parent.updateOpenKeys(this.name);
             }
         },
         watch: {
@@ -117,11 +125,15 @@
                 }
             }
         },
-        events: {
+        mounted () {
-            'on-menu-item-select' () {
+            this.$on('on-menu-item-select', (name) => {
                 if (this.mode === 'horizontal') this.opened = false;
+                this.dispatch('Menu', 'on-menu-item-select', name);
                 return true;
-            }
+            });
+            this.$on('on-update-active-name', (status) => {
+                this.active = status;
+            });
         }
     };
 </script>

src/components/select/dropdown.vue

@@ -6,6 +6,7 @@
     import Popper from 'popper.js';
 
     export default {
+        name: 'Drop',
         props: {
             placement: {
                 type: String,

src/index.js

@@ -20,7 +20,7 @@ import Icon from './components/icon';
 import Input from './components/input';
 import InputNumber from './components/input-number';
 // import LoadingBar from './components/loading-bar';
-// import Menu from './components/menu';
+import Menu from './components/menu';
 // import Message from './components/message';
 // import Modal from './components/modal';
 // import Notice from './components/notice';
@@ -76,10 +76,10 @@ const iview = {
     Input,
     InputNumber,
     // LoadingBar,
-    // Menu,
+    Menu,
-    // MenuGroup: Menu.Group,
+    MenuGroup: Menu.Group,
-    // MenuItem: Menu.Item,
+    MenuItem: Menu.Item,
-    // Submenu: Menu.Sub,
+    Submenu: Menu.Sub,
     // Message,
     // Modal,
     // Notice,