support Menu & Layout
support Menu & Layout
This commit is contained in:
梁灏
parent
dcbfc23239
commit
fd1582c5b5
10 changed files with 284 additions and 118 deletions
|
|
@ -35,4 +35,7 @@ class 改为了 className
|
|||
支持 v-model
|
||||
### Dropdown
|
||||
DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync
|
||||
DropdownItem 里，this.$parent.$parent 与1.0 有区别
|
||||
DropdownItem 里，this.$parent.$parent 与1.0 有区别
|
||||
### Menu
|
||||
MenuItem 和 Submenu 的 key 改为了 name
|
||||
Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -124,6 +124,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/breadcrumb',
|
||||
component: require('./routers/breadcrumb.vue')
|
||||
},
|
||||
{
|
||||
path: '/menu',
|
||||
component: require('./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">
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Submenu key="3">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析
|
||||
</template>
|
||||
<Menu-group title="使用">
|
||||
<Menu-item key="3-1">新增和启动</Menu-item>
|
||||
<Menu-item key="3-2">活跃分析</Menu-item>
|
||||
<Menu-item key="3-3">时段分析</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="留存">
|
||||
<Menu-item key="3-4">用户留存</Menu-item>
|
||||
<Menu-item key="3-5">流失用户</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
<Menu-item key="4">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</Menu-item>
|
||||
</Menu>
|
||||
<br>
|
||||
<p>切换主题</p>
|
||||
<Radio-group :model.sync="theme1">
|
||||
<Radio value="light"></Radio>
|
||||
<Radio value="dark"></Radio>
|
||||
<Radio value="primary"></Radio>
|
||||
</Radio-group>
|
||||
<i-button @click="ak = '2'">change</i-button>
|
||||
<div>
|
||||
<Row>
|
||||
<i-col span="8">
|
||||
<Menu :theme="theme2" @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" 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 v-model="theme2">
|
||||
<Radio label="light"></Radio>
|
||||
<Radio label="dark"></Radio>
|
||||
</Radio-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme1: 'light',
|
||||
ak: '1'
|
||||
theme2: 'light'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
s (s) {
|
||||
console.log(s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
this.$children.forEach((item, index) => {
|
||||
if (!this.activeKey && index === 0) {
|
||||
this.activeKey = -1;
|
||||
}
|
||||
|
||||
if (item.$options.name === 'Submenu') {
|
||||
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;
|
||||
}
|
||||
});
|
||||
updateActiveName () {
|
||||
if (!this.currentActiveName) {
|
||||
this.currentActiveName = -1;
|
||||
}
|
||||
this.broadcast('Submenu', 'on-update-active-name', false);
|
||||
this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
|
||||
},
|
||||
updateOpenKeys (key) {
|
||||
const index = this.openKeys.indexOf(key);
|
||||
updateOpenKeys (name) {
|
||||
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 () {
|
||||
this.updateActiveKey();
|
||||
mounted () {
|
||||
this.updateActiveName();
|
||||
this.updateOpened();
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' (key) {
|
||||
this.activeKey = key;
|
||||
this.$emit('on-select', key);
|
||||
}
|
||||
this.$on('on-menu-item-select', (name) => {
|
||||
this.currentActiveName = name;
|
||||
this.$emit('on-select', name);
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
openKeys () {
|
||||
this.$emit('on-open-change', this.openKeys);
|
||||
openNames () {
|
||||
this.$emit('on-open-change', this.openNames);
|
||||
},
|
||||
activeKey () {
|
||||
this.updateActiveKey();
|
||||
activeName (val) {
|
||||
this.currentActiveName = val;
|
||||
},
|
||||
currentActiveName () {
|
||||
this.updateActiveName();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<Drop
|
||||
v-else
|
||||
v-show="opened"
|
||||
placement="bottom"
|
||||
transition="slide-up"
|
||||
v-ref:drop
|
||||
:style="dropStyle"><slot></slot></Drop>
|
||||
<transition name="slide-up" v-else>
|
||||
<Drop
|
||||
v-show="opened"
|
||||
placement="bottom"
|
||||
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: {
|
||||
'on-menu-item-select' () {
|
||||
mounted () {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import Popper from 'popper.js';
|
||||
|
||||
export default {
|
||||
name: 'Drop',
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
|
|
|
|||
10
src/index.js
10
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,
|
||||
// MenuGroup: Menu.Group,
|
||||
// MenuItem: Menu.Item,
|
||||
// Submenu: Menu.Sub,
|
||||
Menu,
|
||||
MenuGroup: Menu.Group,
|
||||
MenuItem: Menu.Item,
|
||||
Submenu: Menu.Sub,
|
||||
// Message,
|
||||
// Modal,
|
||||
// Notice,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue