change the way to handle submenu collapse when accordion is true
This commit is contained in:
zhigang.li
parent
b924d14da3
commit
2b24fcceed
7 changed files with 147 additions and 12 deletions
32
examples/routers/menu-item.vue
Normal file
32
examples/routers/menu-item.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<Submenu :name="`${parentName}`">
|
||||
<template slot="title">
|
||||
<span>{{ parentItem.name }}</span>
|
||||
</template>
|
||||
<template v-for="item in children">
|
||||
<custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
|
||||
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
|
||||
</template>
|
||||
</Submenu>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'custemMenuItem',
|
||||
props: {
|
||||
parentItem: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
theme: String,
|
||||
iconSize: Number
|
||||
},
|
||||
computed: {
|
||||
parentName () {
|
||||
return this.parentItem.name
|
||||
},
|
||||
children () {
|
||||
return this.parentItem.children
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -44,14 +44,92 @@
|
|||
<MenuItem name="5-4">Option 12</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
<!-- <Menu theme="dark" accordion @on-open-change="handleOpenChange">
|
||||
<template v-for="item in menuList">
|
||||
<custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
|
||||
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
|
||||
</template>
|
||||
</Menu>
|
||||
<Button @click="setOpenNames">修改展开数组</Button>
|
||||
<Button @click="addNewItem">添加菜单项</Button> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import custemMenuItem from './menu-item.vue'
|
||||
export default {
|
||||
components: {
|
||||
custemMenuItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
openNames: ['1']
|
||||
openNames: ['1'],
|
||||
menuList: [
|
||||
{
|
||||
name: '111',
|
||||
children: [
|
||||
{
|
||||
name: '111-111'
|
||||
},
|
||||
{
|
||||
name: '111-222'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222',
|
||||
children: [
|
||||
{
|
||||
name: '222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-222-222-222'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222-333',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-111',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-111-111'
|
||||
},
|
||||
{
|
||||
name: '222-333-111-222'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '222-333-222',
|
||||
children: [
|
||||
{
|
||||
name: '222-333-222-111'
|
||||
},
|
||||
{
|
||||
name: '222-333-222-222'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -63,6 +141,16 @@
|
|||
this.$nextTick(() => {
|
||||
this.$refs.menu.updateOpened();
|
||||
})
|
||||
},
|
||||
addNewItem () {
|
||||
this.menuList[1].children[1].children.push({
|
||||
name: '222-222-333',
|
||||
children: [
|
||||
{
|
||||
name: '222-222-333-111'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "2.13.1",
|
||||
"version": "2.14.0-rc.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@sinonjs/formatio": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
|
||||
"integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -2315,7 +2315,7 @@
|
|||
},
|
||||
"compression": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
|
||||
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
|
||||
"integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -9278,7 +9278,7 @@
|
|||
},
|
||||
"onetime": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||
"dev": true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
|
||||
"dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 1234 --config build/webpack.dev.config.js",
|
||||
"dev:s": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --host 0.0.0.0 --config build/webpack.dev.config.js",
|
||||
"dist:style": "gulp --gulpfile build/build-style.js",
|
||||
"dist:dev": "webpack --config build/webpack.dist.dev.config.js",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<ul :class="classes" :style="styles"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
|
||||
import { oneOf, findComponentsDownward, findComponentsUpward } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
|
@ -84,17 +84,18 @@
|
|||
} else {
|
||||
if (this.accordion) {
|
||||
let currentSubmenu = null;
|
||||
names = [];
|
||||
findComponentsDownward(this, 'Submenu').forEach(item => {
|
||||
if (item.name === name) currentSubmenu = item;
|
||||
});
|
||||
findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
|
||||
let i = names.indexOf(item.name);
|
||||
if (i >= 0) names.splice(i, 1);
|
||||
findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
|
||||
names.push(item.name);
|
||||
});
|
||||
}
|
||||
names.push(name);
|
||||
}
|
||||
this.openedNames = names;
|
||||
this.updateOpened();
|
||||
this.$emit('on-open-change', this.openedNames);
|
||||
},
|
||||
updateOpened () {
|
||||
|
|
|
|||
|
|
@ -16,4 +16,4 @@ export default {
|
|||
return this.menu.mode;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -234,7 +234,9 @@ export function findBrothersComponents (context, componentName, exceptMe = true)
|
|||
let res = context.$parent.$children.filter(item => {
|
||||
return item.$options.name === componentName;
|
||||
});
|
||||
let index = res.indexOf(context);
|
||||
let index = res.findIndex(item => {
|
||||
return item._uid === context._uid;
|
||||
});
|
||||
if (exceptMe) res.splice(index, 1);
|
||||
return res;
|
||||
}
|
||||
|
|
@ -322,3 +324,15 @@ export function setMatchMedia () {
|
|||
window.matchMedia = window.matchMedia || matchMediaPolyfill;
|
||||
}
|
||||
}
|
||||
|
||||
export function getCommonString (arr1, arr2) {
|
||||
const len1 = arr1.length;
|
||||
const len2 = arr2.length;
|
||||
let i = -1;
|
||||
const len = Math.min(len1, len2);
|
||||
let res = [];
|
||||
while (++i < len) {
|
||||
if (arr1.indexOf(arr2[i]) >= 0) res.push(arr2[i]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue