test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-03 20:58:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix menu when not index active

Browse Source
This commit is contained in:
baiyaaaaa 2017-02-17 11:29:27 +08:00 committed by 杨奕
parent d220894e81
commit 59de02e3cd
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,11 @@
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
@ -24,7 +30,7 @@ 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.
```html
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu theme="dark" :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>
@ -35,7 +41,7 @@ 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="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu :default-active="activeIndex2" 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>
@ -48,6 +54,12 @@ Top bar NavMenu can be used in a variety of scenarios.
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);

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

@ -30,6 +30,12 @@
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
@ -55,7 +61,7 @@
::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
```html
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu theme="dark" :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>
@ -66,7 +72,7 @@
<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="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
@ -79,6 +85,12 @@
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);

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

@ -50,10 +50,13 @@
watch: {
defaultActive(value) {
const item = this.items[value];
if (!item) return;
if (item) {
this.activedIndex = item.index;
this.initOpenedMenu();
} else {
this.activedIndex = '';
}
this.activedIndex = item.index;
this.initOpenedMenu();
},
defaultOpeneds(value) {
this.openedMenus = value;