Merge pull request #3303 from lison16/fixed-menu

fixed https://github.com/iview/iview/issues/3298
This commit is contained in:
Aresn 2018-04-04 14:05:02 +08:00 committed by GitHub
commit ca60058bf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 51 deletions

View file

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