drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed https://github.com/iview/iview/issues/3298

Browse source
This commit is contained in:
zhigang.li 2018-04-04 12:01:29 +08:00
parent 1f7c24bcb7
commit b3b4134d8b
2 changed files with 79 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
examples/routers/menu.vue
View file

@ -1,46 +1,69 @@
<template> <template>
<Menu active-name="1-2" :open-names="['1']" theme="dark"> <div>
<Submenu name="1"> <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
<template slot="title"> <Submenu name="1">
<Icon type="ios-analytics"></Icon> <template slot="title">
Navigation One <Icon type="ios-analytics"></Icon>
</template> Navigation One
<MenuGroup title="Item 1"> </template>
<MenuItem name="1-1">Option 1</MenuItem> <MenuGroup title="Item 1">
<MenuItem name="1-2">Option 2</MenuItem> <MenuItem name="1-1">Option 1</MenuItem>
</MenuGroup> <MenuItem name="1-2">Option 2</MenuItem>
<MenuGroup title="Item 2"> </MenuGroup>
<MenuItem name="1-3">Option 3</MenuItem> <MenuGroup title="Item 2">
<MenuItem name="1-4">Option 4</MenuItem> <MenuItem name="1-3">Option 3</MenuItem>
</MenuGroup> <MenuItem name="1-4">Option 4</MenuItem>
</Submenu> </MenuGroup>
<Submenu name="2">
<template slot="title">
<Icon type="ios-filing"></Icon>
Navigation Two
</template>
<MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem>
<Submenu name="3">
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>
<MenuItem name="3-2">Option 8</MenuItem>
</Submenu> </Submenu>
</Submenu> <Submenu name="2">
<Submenu name="4"> <template slot="title">
<template slot="title"> <Icon type="ios-filing"></Icon>
<Icon type="ios-gear"></Icon> Navigation Two
Navigation Three </template>
</template> <MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="4-1">Option 9</MenuItem> <MenuItem name="2-2">Option 6</MenuItem>
<MenuItem name="4-2">Option 10</MenuItem> <Submenu name="3">
<MenuItem name="4-3">Option 11</MenuItem> <template slot="title">Submenu</template>
<MenuItem name="4-4">Option 12</MenuItem> <MenuItem name="3-1">Option 7</MenuItem>
</Submenu> <MenuItem name="3-2">Option 8</MenuItem>
</Menu> </Submenu>
<Submenu name="4">
<template slot="title">Submenu</template>
<MenuItem name="4-1">Option 7</MenuItem>
<MenuItem name="4-2">Option 8</MenuItem>
</Submenu>
</Submenu>
<Submenu name="5">
<template slot="title">
<Icon type="ios-gear"></Icon>
Navigation Three
</template>
<MenuItem name="5-1">Option 9</MenuItem>
<MenuItem name="5-2">Option 10</MenuItem>
<MenuItem name="5-3">Option 11</MenuItem>
<MenuItem name="5-4">Option 12</MenuItem>
</Submenu>
</Menu>
<Button @click="setOpenNames">修改展开数组</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
openNames: ['1']
};
},
methods: {
handleOpenChange (name) {
console.log(name)
},
setOpenNames () {
this.openNames = ['2', '3'];
this.$nextTick(() => {
this.$refs.menu.updateOpened();
})
}
}
} }
</script> </script>

29
src/components/menu/menu.vue
View file

@ -43,7 +43,8 @@
}, },
data () { data () {
return { return {
currentActiveName: this.activeName currentActiveName: this.activeName,
openedNames: []
}; };
}, },
computed: { computed: {
@ -76,36 +77,40 @@
this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName); this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
}, },
updateOpenKeys (name) { updateOpenKeys (name) {
const index = this.openNames.indexOf(name); let names = [...this.openedNames];
if (index > -1) { const index = names.indexOf(name);
this.openNames.splice(index, 1); if (index >= 0) {
names.splice(index, 1);
} else { } else {
this.openNames.push(name);
if (this.accordion) { if (this.accordion) {
let currentSubmenu = {}; let currentSubmenu = null;
findComponentsDownward(this, 'Submenu').forEach(item => { findComponentsDownward(this, 'Submenu').forEach(item => {
if (item.name === name) currentSubmenu = item; if (item.name === name) currentSubmenu = item;
}); });
findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => { findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
let index = this.openNames.indexOf(item.name); let i = names.indexOf(item.name);
this.openNames.splice(index, index >= 0 ? 1 : 0); if (i >= 0) names.splice(i, 1);
}); });
this.openNames.push(name); names.push(name);
} }
} }
this.openedNames = names;
this.$emit('on-open-change', this.openedNames);
}, },
updateOpened () { updateOpened () {
const items = findComponentsDownward(this, 'Submenu'); const items = findComponentsDownward(this, 'Submenu');
if (items.length) { if (items.length) {
items.forEach(item => { items.forEach(item => {
if (this.openNames.indexOf(item.name) > -1) item.opened = true; if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
else item.opened = false;
}); });
} }
} }
}, },
mounted () { mounted () {
this.updateActiveName(); this.updateActiveName();
this.openedNames = [...this.openNames];
this.updateOpened(); this.updateOpened();
this.$on('on-menu-item-select', (name) => { this.$on('on-menu-item-select', (name) => {
this.currentActiveName = name; this.currentActiveName = name;
@ -113,8 +118,8 @@
}); });
}, },
watch: { watch: {
openNames () { openNames (names) {
this.$emit('on-open-change', this.openNames); this.openedNames = names;
}, },
activeName (val) { activeName (val) {
this.currentActiveName = val; this.currentActiveName = val;