mirror of https://github.com/ElemeFE/element
Menu: add chalk theme
Leopoldthecoder
杨奕
parent
b04ad87df9
commit
27dcb4e40a
|
|
@ -4,7 +4,7 @@
|
|||
padding-left: 55px;
|
||||
}
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
width: 240px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.line {
|
||||
|
|
@ -59,9 +59,9 @@ Menu that provides navigation for your website.
|
|||
|
||||
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
|
||||
<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-submenu index="2">
|
||||
<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>
|
||||
<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-submenu index="2">
|
||||
<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.
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="8">
|
||||
<h5>With icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-col :span="12">
|
||||
<h5>Default colors</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<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 index="1-1">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-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
|
||||
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<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-col>
|
||||
<el-col :span="8">
|
||||
<h5>Without icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
|
||||
<el-col :span="12">
|
||||
<h5>Custom colors</h5>
|
||||
<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">
|
||||
<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 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 title="Group Two">
|
||||
<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-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">Navigator Two</el-menu-item>
|
||||
<el-menu-item index="3">Navigator Three</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>Groups</h5>
|
||||
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
|
||||
<el-menu-item-group title="Group One">
|
||||
<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-item index="2">
|
||||
<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-col>
|
||||
</el-row>
|
||||
|
|
@ -251,6 +274,9 @@ Vertical NavMenu could be collapsed.
|
|||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | menu display mode | string | horizontal/vertical | vertical |
|
||||
| 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 |
|
||||
| default-active | index of currently active menu | string | — | — |
|
||||
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
padding-left: 55px;
|
||||
}
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
width: 240px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.line {
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
|
||||
适用广泛的基础用法。
|
||||
|
||||
::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
|
||||
::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
|
||||
|
||||
```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-submenu index="2">
|
||||
<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>
|
||||
<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-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
|
|
@ -106,14 +113,21 @@
|
|||
|
||||
垂直菜单，可内嵌子菜单。
|
||||
|
||||
::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。
|
||||
::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="8">
|
||||
<h5>带 icon</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
||||
<el-col :span="12">
|
||||
<h5>默认颜色</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<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>
|
||||
<template slot="title">分组一</template>
|
||||
<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-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
|
||||
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<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-col>
|
||||
<el-col :span="8">
|
||||
<h5>不带 icon</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
|
||||
<el-col :span="12">
|
||||
<h5>自定义颜色</h5>
|
||||
<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">
|
||||
<template slot="title">导航一</template>
|
||||
<el-menu-item-group title="分组一">
|
||||
<template slot="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-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
|
@ -148,21 +179,14 @@
|
|||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">导航二</el-menu-item>
|
||||
<el-menu-item index="3">导航三</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>分组</h5>
|
||||
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
|
||||
<el-menu-item-group title="分组一">
|
||||
<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-item index="2">
|
||||
<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-col>
|
||||
</el-row>
|
||||
|
|
@ -251,7 +275,9 @@
|
|||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | 模式 | string | horizontal,vertical | vertical |
|
||||
| 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-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
|
||||
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
},
|
||||
computed: {
|
||||
levelPadding() {
|
||||
let padding = 10;
|
||||
let padding = 20;
|
||||
let parent = this.$parent;
|
||||
if (this.rootMenu.collapse) return 20;
|
||||
while (parent && parent.$options.componentName !== 'ElMenu') {
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
}
|
||||
parent = parent.$parent;
|
||||
}
|
||||
padding === 10 && (padding = 20);
|
||||
return padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<li class="el-menu-item"
|
||||
:style="paddingStyle"
|
||||
:style="[paddingStyle, itemStyle, { backgroundColor }]"
|
||||
@click="handleClick"
|
||||
@mouseenter="onMouseEnter"
|
||||
@mouseleave="onMouseLeave"
|
||||
:class="{
|
||||
'is-active': active,
|
||||
'is-disabled': disabled
|
||||
|
|
@ -49,9 +51,46 @@
|
|||
computed: {
|
||||
active() {
|
||||
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: {
|
||||
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() {
|
||||
this.dispatch('ElMenu', 'item-click', this);
|
||||
this.$emit('click', this);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<el-menu-collapse-transition>
|
||||
<ul class="el-menu"
|
||||
:key="+collapse"
|
||||
:style="{ backgroundColor: backgroundColor || '' }"
|
||||
:class="{
|
||||
'el-menu--horizontal': mode === 'horizontal',
|
||||
'el-menu--dark': theme === 'dark',
|
||||
'el-menu--collapse': collapse
|
||||
}"
|
||||
>
|
||||
|
|
@ -102,17 +102,16 @@
|
|||
default: ''
|
||||
},
|
||||
defaultOpeneds: Array,
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
uniqueOpened: Boolean,
|
||||
router: Boolean,
|
||||
menuTrigger: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
collapse: Boolean
|
||||
collapse: Boolean,
|
||||
backgroundColor: String,
|
||||
textColor: String,
|
||||
activeTextColor: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -122,6 +121,11 @@
|
|||
submenus: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hoverBackground() {
|
||||
return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultActive(value) {
|
||||
const item = this.items[value];
|
||||
|
|
@ -141,6 +145,42 @@
|
|||
}
|
||||
},
|
||||
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) {
|
||||
this.$set(this.items, item.index, item);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,23 +8,28 @@
|
|||
@mouseenter="handleMouseenter"
|
||||
@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>
|
||||
<i :class="{
|
||||
'el-submenu__icon-arrow': true,
|
||||
'el-icon-caret-bottom': rootMenu.mode === 'horizontal',
|
||||
'el-icon-arrow-down': rootMenu.mode === 'vertical' && !rootMenu.collapse,
|
||||
'el-icon-caret-right': rootMenu.mode === 'vertical' && rootMenu.collapse
|
||||
'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
|
||||
'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
|
||||
}">
|
||||
</i>
|
||||
</div>
|
||||
<template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -63,27 +68,54 @@
|
|||
opened() {
|
||||
return this.rootMenu.openedMenus.indexOf(this.index) > -1;
|
||||
},
|
||||
active: {
|
||||
cache: false,
|
||||
get() {
|
||||
let isActive = false;
|
||||
const submenus = this.submenus;
|
||||
const items = this.items;
|
||||
active() {
|
||||
let isActive = false;
|
||||
const submenus = this.submenus;
|
||||
const items = this.items;
|
||||
|
||||
Object.keys(items).forEach(index => {
|
||||
if (items[index].active) {
|
||||
isActive = true;
|
||||
}
|
||||
});
|
||||
Object.keys(items).forEach(index => {
|
||||
if (items[index].active) {
|
||||
isActive = true;
|
||||
}
|
||||
});
|
||||
|
||||
Object.keys(submenus).forEach(index => {
|
||||
if (submenus[index].active) {
|
||||
isActive = true;
|
||||
}
|
||||
});
|
||||
Object.keys(submenus).forEach(index => {
|
||||
if (submenus[index].active) {
|
||||
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: {
|
||||
|
|
@ -134,6 +166,14 @@
|
|||
this.timeout = setTimeout(() => {
|
||||
this.rootMenu.closeMenu(this.index);
|
||||
}, 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() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
@import "mixins/mixins";
|
||||
|
||||
@include b(aside) {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -584,13 +584,9 @@ $--steps-padding: 20px;
|
|||
|
||||
/* Menu
|
||||
--------------------------*/
|
||||
$--menu-item-color: $--link-color;
|
||||
$--menu-item-fill: $--color-text-placeholder;
|
||||
$--menu-item-hover-fill: $--disabled-border-base;
|
||||
|
||||
$--dark-menu-item-color: $--link-color;
|
||||
$--dark-menu-item-fill: $--color-text-secondary;
|
||||
$--dark-menu-item-hover-fill: $--link-color;
|
||||
$--menu-item-color: $--color-text-primary;
|
||||
$--menu-item-fill: $--color-white;
|
||||
$--menu-item-hover-fill: $--color-primary-light-9;
|
||||
|
||||
/* Rate
|
||||
--------------------------*/
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
@include b(menu) {
|
||||
border-radius: 2px;
|
||||
border-right: solid 1px #e6e6e6;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
|
@ -28,27 +28,9 @@
|
|||
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) {
|
||||
border-right: none;
|
||||
border-bottom: solid 1px #e6e6e6;
|
||||
& .el-menu-item {
|
||||
float: left;
|
||||
height: 60px;
|
||||
|
|
@ -57,7 +39,8 @@
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $--color-text-secondary;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
|
|
@ -65,7 +48,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--menu-item-hover-fill;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
& .el-submenu {
|
||||
|
|
@ -76,18 +59,23 @@
|
|||
position: absolute;
|
||||
top: 65px;
|
||||
left: 0;
|
||||
border:1px solid $--color-black;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
background-color: $--color-white;
|
||||
z-index: 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 {
|
||||
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 {
|
||||
|
|
@ -101,40 +89,18 @@
|
|||
& .el-submenu__icon-arrow {
|
||||
position: static;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
color: $--color-black;
|
||||
margin-left: 8px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
& .el-menu-item:hover,
|
||||
& .el-submenu__title:hover {
|
||||
background-color: $--menu-item-fill;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
& > .el-menu-item:hover,
|
||||
& > .el-submenu:hover .el-submenu__title,
|
||||
& > .el-menu-item.is-active,
|
||||
& > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 5px solid $--color-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;
|
||||
}
|
||||
}
|
||||
border-bottom: 2px solid $--color-primary;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
}
|
||||
@include m(collapse) {
|
||||
|
|
@ -160,6 +126,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .el-menu-item.is-active i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
position: relative;
|
||||
& .el-menu {
|
||||
|
|
@ -168,6 +138,7 @@
|
|||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 10;
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
|
|
@ -196,7 +167,10 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $--color-black;
|
||||
background-color: $--menu-item-hover-fill;
|
||||
}
|
||||
i {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
@include when(active) {
|
||||
color: $--color-primary;
|
||||
|
|
@ -208,26 +182,26 @@
|
|||
position: relative;
|
||||
@include menu-item;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-black;
|
||||
}
|
||||
|
||||
& * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--menu-item-hover-fill;
|
||||
}
|
||||
}
|
||||
& .el-menu {
|
||||
background-color: $--color-black;
|
||||
border: none;
|
||||
}
|
||||
& .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 45px;
|
||||
min-width: 200px;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-black;
|
||||
}
|
||||
}
|
||||
@include e(icon-arrow) {
|
||||
position: absolute;
|
||||
|
|
@ -260,11 +234,10 @@
|
|||
padding: 0;
|
||||
}
|
||||
@include e(title) {
|
||||
padding-top: 15px;
|
||||
padding: 7px 0 7px 20px;
|
||||
line-height: normal;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
color: $--color-black;
|
||||
font-size: 12px;
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ describe('Menu', () => {
|
|||
it('default opened', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-menu theme="dark" :default-openeds="defaultOpeneds">
|
||||
<el-menu :default-openeds="defaultOpeneds">
|
||||
<el-menu-item index="1">default opened处理中心</el-menu-item>
|
||||
<el-submenu index="2" ref="submenu1">
|
||||
<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 => {
|
||||
vm = createVue({
|
||||
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-submenu index="2" ref="submenu1">
|
||||
<template slot="title">我的工作台</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue