github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Menu: add chalk theme

pull/7089/head
Leopoldthecoder 2017-09-16 20:50:19 +08:00 committed by 杨奕
parent b04ad87df9
commit 27dcb4e40a
10 changed files with 315 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
examples/docs/en-US/menu.md
View File

@ -4,7 +4,7 @@
padding-left: 55px; padding-left: 55px;
} }
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 240px;
min-height: 400px; min-height: 400px;
} }
.line { .line {
@ -59,9 +59,9 @@ Menu that provides navigation for your website.
Top bar NavMenu can be used in a variety of scenarios. Top bar NavMenu can be used in a variety of scenarios.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. ::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
```html ```html
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item> <el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title">Workspace</template> <template slot="title">Workspace</template>
@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios.
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item> <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu> </el-menu>
<div class="line"></div> <div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">Processing Center</el-menu-item> <el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title">Workspace</template> <template slot="title">Workspace</template>
@ -108,11 +115,18 @@ Vertical NavMenu with sub-menus.
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. ::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
```html ```html
<el-row class="tac"> <el-row class="tac">
<el-col :span="8"> <el-col :span="12">
<h5>With icons</h5> <h5>Default colors</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template> <template slot="title">
<i class="el-icon-message"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One"> <el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item> <el-menu-item index="1-2">item one</el-menu-item>
@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item> <el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu> </el-submenu>
</el-submenu> </el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item> <el-menu-item index="2">
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item> <i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Three</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="12">
<h5>Without icons</h5> <h5>Custom colors</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark"> <el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title">Navigator One</template> <template slot="title">
<i class="el-icon-message"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One"> <el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item> <el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
<el-menu-item-group title="Group Two"> <el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item> <el-menu-item index="1-3">item three</el-menu-item>
@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item> <el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu> </el-submenu>
</el-submenu> </el-submenu>
<el-menu-item index="2">Navigator Two</el-menu-item> <el-menu-item index="2">
<el-menu-item index="3">Navigator Three</el-menu-item> <i class="el-icon-menu"></i>
</el-menu> <span>Navigator Two</span>
</el-col> </el-menu-item>
<el-col :span="8"> <el-menu-item index="3">
<h5>Groups</h5> <i class="el-icon-setting"></i>
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo"> <span>Navigator Three</span>
<el-menu-item-group title="Group One"> </el-menu-item>
<el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
</el-menu-item-group>
</el-menu> </el-menu>
</el-col> </el-col>
</el-row> </el-row>
@ -251,6 +274,9 @@ Vertical NavMenu could be collapsed.
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal/vertical | vertical | | mode | menu display mode | string | horizontal/vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | | collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #1989fa |
| theme | theme color | string | light/dark | light | | theme | theme color | string | light/dark | light |
| default-active | index of currently active menu | string | — | — | | default-active | index of currently active menu | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — | | default-openeds | array that contains keys of currently active sub-menus | Array | — | — |

90
examples/docs/zh-CN/menu.md
View File

@ -4,7 +4,7 @@
padding-left: 55px; padding-left: 55px;
} }
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 240px;
min-height: 400px; min-height: 400px;
} }
.line { .line {
@ -59,10 +59,10 @@
适用广泛的基础用法。 适用广泛的基础用法。
::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。 ::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
```html ```html
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title">我的工作台</template> <template slot="title">我的工作台</template>
@ -73,7 +73,14 @@
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu> </el-menu>
<div class="line"></div> <div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title">我的工作台</template> <template slot="title">我的工作台</template>
@ -106,14 +113,21 @@
垂直菜单，可内嵌子菜单。 垂直菜单，可内嵌子菜单。
::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。 ::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
```html ```html
<el-row class="tac"> <el-row class="tac">
<el-col :span="8"> <el-col :span="12">
<h5>带 icon</h5> <h5>默认颜色</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template> <template slot="title">
<i class="el-icon-message"></i>
<span>导航一</span>
</template>
<el-menu-item-group> <el-menu-item-group>
<template slot="title">分组一</template> <template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-1">选项1</el-menu-item>
@ -127,16 +141,33 @@
<el-menu-item index="1-4-1">选项1</el-menu-item> <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu> </el-submenu>
</el-submenu> </el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item> <el-menu-item index="2">
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item> <i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="12">
<h5>不带 icon</h5> <h5>自定义颜色</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark"> <el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1"> <el-submenu index="1">
<template slot="title">导航一</template> <template slot="title">
<el-menu-item-group title="分组一"> <i class="el-icon-message"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group> </el-menu-item-group>
@ -148,21 +179,14 @@
<el-menu-item index="1-4-1">选项1</el-menu-item> <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu> </el-submenu>
</el-submenu> </el-submenu>
<el-menu-item index="2">导航二</el-menu-item> <el-menu-item index="2">
<el-menu-item index="3">导航三</el-menu-item> <i class="el-icon-menu"></i>
</el-menu> <span slot="title">导航二</span>
</el-col> </el-menu-item>
<el-col :span="8"> <el-menu-item index="3">
<h5>分组</h5> <i class="el-icon-setting"></i>
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo"> <span slot="title">导航三</span>
<el-menu-item-group title="分组一"> </el-menu-item>
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
</el-menu-item-group>
</el-menu> </el-menu>
</el-col> </el-col>
</el-row> </el-row>
@ -251,7 +275,9 @@
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | vertical | | mode | 模式 | string | horizontal,vertical | vertical |
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false | | collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
| theme | 主题色 | string | light,dark | light | | background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 |
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #1989fa |
| default-active | 当前激活菜单的 index | string | — | — | | default-active | 当前激活菜单的 index | string | — | — |
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — | | default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false | | unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |

3
packages/menu/src/menu-item-group.vue
View File

@ -28,7 +28,7 @@
}, },
computed: { computed: {
levelPadding() { levelPadding() {
let padding = 10; let padding = 20;
let parent = this.$parent; let parent = this.$parent;
if (this.rootMenu.collapse) return 20; if (this.rootMenu.collapse) return 20;
while (parent && parent.$options.componentName !== 'ElMenu') { while (parent && parent.$options.componentName !== 'ElMenu') {
@ -37,7 +37,6 @@
} }
parent = parent.$parent; parent = parent.$parent;
} }
padding === 10 && (padding = 20);
return padding; return padding;
} }
} }

41
packages/menu/src/menu-item.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<li class="el-menu-item" <li class="el-menu-item"
:style="paddingStyle" :style="[paddingStyle, itemStyle, { backgroundColor }]"
@click="handleClick" @click="handleClick"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
:class="{ :class="{
'is-active': active, 'is-active': active,
'is-disabled': disabled 'is-disabled': disabled
@ -49,9 +51,46 @@
computed: { computed: {
active() { active() {
return this.index === this.rootMenu.activeIndex; return this.index === this.rootMenu.activeIndex;
},
hoverBackground() {
return this.rootMenu.hoverBackground;
},
backgroundColor() {
return this.rootMenu.backgroundColor || '';
},
activeTextColor() {
return this.rootMenu.activeTextColor || '';
},
textColor() {
return this.rootMenu.textColor || '';
},
mode() {
return this.rootMenu.mode;
},
itemStyle() {
const style = {
color: this.active ? this.activeTextColor : this.textColor
};
if (this.mode === 'horizontal' && !this.isNested) {
style.borderBottomColor = this.active
? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
: 'transparent';
}
return style;
},
isNested() {
return this.parentMenu !== this.rootMenu;
} }
}, },
methods: { methods: {
onMouseEnter() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$el.style.backgroundColor = this.hoverBackground;
},
onMouseLeave() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$el.style.backgroundColor = this.backgroundColor;
},
handleClick() { handleClick() {
this.dispatch('ElMenu', 'item-click', this); this.dispatch('ElMenu', 'item-click', this);
this.$emit('click', this); this.$emit('click', this);

52
packages/menu/src/menu.vue
View File

@ -2,9 +2,9 @@
<el-menu-collapse-transition> <el-menu-collapse-transition>
<ul class="el-menu" <ul class="el-menu"
:key="+collapse" :key="+collapse"
:style="{ backgroundColor: backgroundColor || '' }"
:class="{ :class="{
'el-menu--horizontal': mode === 'horizontal', 'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse 'el-menu--collapse': collapse
}" }"
> >
@ -102,17 +102,16 @@
default: '' default: ''
}, },
defaultOpeneds: Array, defaultOpeneds: Array,
theme: {
type: String,
default: 'light'
},
uniqueOpened: Boolean, uniqueOpened: Boolean,
router: Boolean, router: Boolean,
menuTrigger: { menuTrigger: {
type: String, type: String,
default: 'hover' default: 'hover'
}, },
collapse: Boolean collapse: Boolean,
backgroundColor: String,
textColor: String,
activeTextColor: String
}, },
data() { data() {
return { return {
@ -122,6 +121,11 @@
submenus: {} submenus: {}
}; };
}, },
computed: {
hoverBackground() {
return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
}
},
watch: { watch: {
defaultActive(value) { defaultActive(value) {
const item = this.items[value]; const item = this.items[value];
@ -141,6 +145,42 @@
} }
}, },
methods: { methods: {
getColorChannels(color) {
color = color.replace('#', '');
if (/^[1-9a-fA-F]{3}$/.test(color)) {
color = color.split('');
for (let i = 2; i >= 0; i--) {
color.splice(i, 0, color[i]);
}
color = color.join('');
}
if (/^[1-9a-fA-F]{6}$/.test(color)) {
return {
red: parseInt(color.slice(0, 2), 16),
green: parseInt(color.slice(2, 4), 16),
blue: parseInt(color.slice(4, 6), 16)
};
} else {
return {
red: 255,
green: 255,
blue: 255
};
}
},
mixColor(color, percent) {
let { red, green, blue } = this.getColorChannels(color);
if (percent > 0) { // shade given color
red *= 1 - percent;
green *= 1 - percent;
blue *= 1 - percent;
} else { // tint given color
red += (255 - red) * percent;
green += (255 - green) * percent;
blue += (255 - blue) * percent;
}
return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
},
addItem(item) { addItem(item) {
this.$set(this.items, item.index, item); this.$set(this.items, item.index, item);
}, },

86
packages/menu/src/submenu.vue
View File

@ -8,23 +8,28 @@
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
> >
<div class="el-submenu__title" ref="submenu-title" @click="handleClick" :style="paddingStyle"> <div
class="el-submenu__title"
ref="submenu-title"
@click="handleClick"
@mouseenter="handleTitleMouseenter"
@mouseleave="handleTitleMouseleave"
:style="[paddingStyle, titleStyle, { backgroundColor }]">
<slot name="title"></slot> <slot name="title"></slot>
<i :class="{ <i :class="{
'el-submenu__icon-arrow': true, 'el-submenu__icon-arrow': true,
'el-icon-caret-bottom': rootMenu.mode === 'horizontal', 'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
'el-icon-arrow-down': rootMenu.mode === 'vertical' && !rootMenu.collapse, 'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
'el-icon-caret-right': rootMenu.mode === 'vertical' && rootMenu.collapse
}"> }">
</i> </i>
</div> </div>
<template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)"> <template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
<transition :name="menuTransitionName"> <transition :name="menuTransitionName">
<ul class="el-menu" v-show="opened"><slot></slot></ul> <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
</transition> </transition>
</template> </template>
<el-collapse-transition v-else> <el-collapse-transition v-else>
<ul class="el-menu" v-show="opened"><slot></slot></ul> <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
</el-collapse-transition> </el-collapse-transition>
</li> </li>
</template> </template>
@ -63,27 +68,54 @@
opened() { opened() {
return this.rootMenu.openedMenus.indexOf(this.index) > -1; return this.rootMenu.openedMenus.indexOf(this.index) > -1;
}, },
active: { active() {
cache: false, let isActive = false;
get() { const submenus = this.submenus;
let isActive = false; const items = this.items;
const submenus = this.submenus;
const items = this.items;
Object.keys(items).forEach(index => { Object.keys(items).forEach(index => {
if (items[index].active) { if (items[index].active) {
isActive = true; isActive = true;
} }
}); });
Object.keys(submenus).forEach(index => { Object.keys(submenus).forEach(index => {
if (submenus[index].active) { if (submenus[index].active) {
isActive = true; isActive = true;
} }
}); });
return isActive; return isActive;
},
hoverBackground() {
return this.rootMenu.hoverBackground;
},
backgroundColor() {
return this.rootMenu.backgroundColor || '';
},
activeTextColor() {
return this.rootMenu.activeTextColor || '';
},
textColor() {
return this.rootMenu.textColor || '';
},
mode() {
return this.rootMenu.mode;
},
titleStyle() {
if (this.mode !== 'horizontal') {
return {
color: this.textColor
};
} }
return {
borderBottomColor: this.active
? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
: 'transparent',
color: this.active
? this.activeTextColor
: this.textColor
};
} }
}, },
methods: { methods: {
@ -134,6 +166,14 @@
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.rootMenu.closeMenu(this.index); this.rootMenu.closeMenu(this.index);
}, 300); }, 300);
},
handleTitleMouseenter() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground;
},
handleTitleMouseleave() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || '';
} }
}, },
created() { created() {

6
packages/theme-chalk/src/aside.scss
View File

@ -0,0 +1,6 @@
@import "mixins/mixins";
@include b(aside) {
overflow: auto;
box-sizing: border-box;
}

10
packages/theme-chalk/src/common/var.scss
View File

@ -584,13 +584,9 @@ $--steps-padding: 20px;
/* Menu /* Menu
--------------------------*/ --------------------------*/
$--menu-item-color: $--link-color; $--menu-item-color: $--color-text-primary;
$--menu-item-fill: $--color-text-placeholder; $--menu-item-fill: $--color-white;
$--menu-item-hover-fill: $--disabled-border-base; $--menu-item-hover-fill: $--color-primary-light-9;
$--dark-menu-item-color: $--link-color;
$--dark-menu-item-fill: $--color-text-secondary;
$--dark-menu-item-hover-fill: $--link-color;
/* Rate /* Rate
--------------------------*/ --------------------------*/

107
packages/theme-chalk/src/menu.scss
View File

@ -16,7 +16,7 @@
} }
@include b(menu) { @include b(menu) {
border-radius: 2px; border-right: solid 1px #e6e6e6;
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0; margin: 0;
@ -28,27 +28,9 @@
list-style: none; list-style: none;
} }
@include m(dark) {
background-color: $--dark-menu-item-fill;
& .el-menu-item,
& .el-submenu__title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
& .el-submenu .el-menu {
background-color: $--color-black;
& .el-menu-item:hover {
background-color: $--color-black;
}
}
}
@include m(horizontal) { @include m(horizontal) {
border-right: none;
border-bottom: solid 1px #e6e6e6;
& .el-menu-item { & .el-menu-item {
float: left; float: left;
height: 60px; height: 60px;
@ -57,7 +39,8 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 5px solid transparent; border-bottom: 2px solid transparent;
color: $--color-text-secondary;
a, a,
a:hover { a:hover {
@ -65,7 +48,7 @@
} }
&:hover { &:hover {
background-color: $--menu-item-hover-fill; background-color: #fff;
} }
} }
& .el-submenu { & .el-submenu {
@ -76,18 +59,23 @@
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0; left: 0;
border:1px solid $--color-black; border: none;
padding: 5px 0; padding: 5px 0;
background-color: $--color-white; background-color: $--color-white;
z-index: 100; z-index: 100;
min-width: 100%; min-width: 100%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); box-shadow: $--box-shadow-light;
} }
& .el-submenu__title { & .el-submenu__title {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-bottom: 5px solid transparent; border-bottom: 2px solid transparent;
color: $--color-text-secondary;
}
.el-submenu__title:hover {
background-color: #fff;
} }
& .el-menu-item { & .el-menu-item {
@ -101,40 +89,18 @@
& .el-submenu__icon-arrow { & .el-submenu__icon-arrow {
position: static; position: static;
vertical-align: middle; vertical-align: middle;
margin-left: 5px; margin-left: 8px;
color: $--color-black;
margin-top: -3px; margin-top: -3px;
} }
} }
& .el-menu-item:hover, & .el-menu-item:hover,
& .el-submenu__title:hover { & .el-submenu__title:hover {
background-color: $--menu-item-fill; color: $--color-text-primary;
} }
& > .el-menu-item:hover, & > .el-menu-item.is-active,
& > .el-submenu:hover .el-submenu__title,
& > .el-submenu.is-active .el-submenu__title { & > .el-submenu.is-active .el-submenu__title {
border-bottom: 5px solid $--color-primary; border-bottom: 2px solid $--color-primary;
} color: $--color-text-primary;
&.el-menu--dark {
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: $--dark-menu-item-fill;
}
& .el-submenu {
.el-menu-item,
.el-submenu-title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
.el-menu-item.is-active {
color: $--color-primary;
}
}
} }
} }
@include m(collapse) { @include m(collapse) {
@ -160,6 +126,10 @@
} }
} }
> .el-menu-item.is-active i {
color: inherit;
}
.el-submenu { .el-submenu {
position: relative; position: relative;
& .el-menu { & .el-menu {
@ -168,6 +138,7 @@
top: 0; top: 0;
left: 100%; left: 100%;
z-index: 10; z-index: 10;
box-shadow: $--box-shadow-light;
} }
&.is-opened { &.is-opened {
@ -196,7 +167,10 @@
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
background-color: $--color-black; background-color: $--menu-item-hover-fill;
}
i {
color: $--color-text-secondary;
} }
@include when(active) { @include when(active) {
color: $--color-primary; color: $--color-primary;
@ -208,26 +182,26 @@
position: relative; position: relative;
@include menu-item; @include menu-item;
&:hover {
background-color: $--color-black;
}
& * { & * {
vertical-align: middle; vertical-align: middle;
} }
i {
color: $--color-text-secondary;
}
&:hover {
background-color: $--menu-item-hover-fill;
}
} }
& .el-menu { & .el-menu {
background-color: $--color-black; border: none;
} }
& .el-menu-item { & .el-menu-item {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 45px; padding: 0 45px;
min-width: 200px; min-width: 200px;
&:hover {
background-color: $--color-black;
}
} }
@include e(icon-arrow) { @include e(icon-arrow) {
position: absolute; position: absolute;
@ -260,11 +234,10 @@
padding: 0; padding: 0;
} }
@include e(title) { @include e(title) {
padding-top: 15px; padding: 7px 0 7px 20px;
line-height: normal; line-height: normal;
font-size: 14px; font-size: 12px;
padding-left: 20px; color: $--color-text-secondary;
color: $--color-black;
} }
} }

19
test/unit/specs/menu.spec.js
View File

@ -185,7 +185,7 @@ describe('Menu', () => {
it('default opened', done => { it('default opened', done => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-menu theme="dark" :default-openeds="defaultOpeneds"> <el-menu :default-openeds="defaultOpeneds">
<el-menu-item index="1">default opened处理中心</el-menu-item> <el-menu-item index="1">default opened处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1"> <el-submenu index="2" ref="submenu1">
<template slot="title">default opened我的工作台</template> <template slot="title">default opened我的工作台</template>
@ -217,25 +217,10 @@ describe('Menu', () => {
}); });
}); });
}); });
it('theme', () => {
vm = createVue({
template: `
<el-menu theme="dark">
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
};
}
}, true);
expect(vm.$el.classList.contains('el-menu--dark')).to.be.true;
});
it('unique-opened', done => { it('unique-opened', done => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-menu theme="dark" unique-opened default-active="2-2"> <el-menu unique-opened default-active="2-2">
<el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1"> <el-submenu index="2" ref="submenu1">
<template slot="title">我的工作台</template> <template slot="title">我的工作台</template>