empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
|
|
@ -1,10 +0,0 @@
|
|||
import Menu from './menu.vue';
|
||||
import MenuGroup from './menu-group.vue';
|
||||
import MenuItem from './menu-item.vue';
|
||||
import Submenu from './submenu.vue';
|
||||
|
||||
Menu.Group = MenuGroup;
|
||||
Menu.Item = MenuItem;
|
||||
Menu.Sub = Submenu;
|
||||
|
||||
export default Menu;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<li :class="[prefixCls + '-item-group']">
|
||||
<div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
|
||||
<ul><slot></slot></ul>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'MenuGroup',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-item`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-item-selected`]: this.active,
|
||||
[`${prefixCls}-item-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) return;
|
||||
this.$dispatch('on-menu-item-select', this.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
<template>
|
||||
<ul :class="classes" :style="styles"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['horizontal', 'vertical']);
|
||||
},
|
||||
default: 'vertical'
|
||||
},
|
||||
theme: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['light', 'dark', 'primary']);
|
||||
},
|
||||
default: 'light'
|
||||
},
|
||||
activeKey: {
|
||||
type: [String, Number]
|
||||
},
|
||||
openKeys: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '240px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
let theme = this.theme;
|
||||
if (this.mode === 'vertical' && this.theme === 'primary') theme = 'light';
|
||||
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${theme}`,
|
||||
{
|
||||
[`${prefixCls}-${this.mode}`]: this.mode
|
||||
}
|
||||
];
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
|
||||
if (this.mode === 'vertical') style.width = this.width;
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
updateOpenKeys (key) {
|
||||
const index = this.openKeys.indexOf(key);
|
||||
if (index > -1) {
|
||||
this.openKeys.splice(index, 1);
|
||||
} else {
|
||||
this.openKeys.push(key);
|
||||
}
|
||||
},
|
||||
updateOpened () {
|
||||
this.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') {
|
||||
if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateActiveKey();
|
||||
this.updateOpened();
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' (key) {
|
||||
this.activeKey = key;
|
||||
this.$emit('on-select', key);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
openKeys () {
|
||||
this.$emit('on-open-change', this.openKeys);
|
||||
},
|
||||
activeKey () {
|
||||
this.updateActiveKey();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls + '-submenu-title']" v-el: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>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import { getStyle } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
name: 'Submenu',
|
||||
components: { Icon, Drop },
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
active: false,
|
||||
opened: false,
|
||||
dropWidth: parseFloat(getStyle(this.$el, 'width'))
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-submenu`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-opened`]: this.opened,
|
||||
[`${prefixCls}-submenu-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
mode () {
|
||||
return this.$parent.mode;
|
||||
},
|
||||
accordion () {
|
||||
return this.$parent.accordion;
|
||||
},
|
||||
dropStyle () {
|
||||
let style = {};
|
||||
|
||||
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMouseenter () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'vertical') return;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
this.opened = true;
|
||||
}, 250);
|
||||
},
|
||||
handleMouseleave () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'vertical') return;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
this.opened = false;
|
||||
}, 150);
|
||||
},
|
||||
handleClick () {
|
||||
if (this.disabled) return;
|
||||
if (this.mode === 'horizontal') return;
|
||||
const opened = this.opened;
|
||||
if (this.accordion) {
|
||||
this.$parent.$children.forEach(item => {
|
||||
if (item.$options.name === 'Submenu') item.opened = false;
|
||||
});
|
||||
}
|
||||
this.opened = !opened;
|
||||
this.$parent.updateOpenKeys(this.key);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mode (val) {
|
||||
if (val === 'horizontal') {
|
||||
this.$refs.drop.update();
|
||||
}
|
||||
},
|
||||
opened (val) {
|
||||
if (this.mode === 'vertical') return;
|
||||
if (val) {
|
||||
// set drop a width to fixed when menu has fixed position
|
||||
this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' () {
|
||||
if (this.mode === 'horizontal') this.opened = false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue