chenhaodong / mew-iview

Commit 2b24fcceed84295234e7bbda9c1b9509ac5a4ee0

Authored by zhigang.li
1 parent b924d14d

change the way to handle submenu collapse when accordion is true

Showing 7 changed files with 147 additions and 12 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu-item.vue 0 → 100644
  Show/Hide comments   View file @2b24fcc
  1 +<template>
  2 + <Submenu :name="`${parentName}`">
  3 + <template slot="title">
  4 + <span>{{ parentItem.name }}</span>
  5 + </template>
  6 + <template v-for="item in children">
  7 + <custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
  8 + <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
  9 + </template>
  10 + </Submenu>
  11 +</template>
  12 +<script>
  13 +export default {
  14 + name: 'custemMenuItem',
  15 + props: {
  16 + parentItem: {
  17 + type: Object,
  18 + default: () => {}
  19 + },
  20 + theme: String,
  21 + iconSize: Number
  22 + },
  23 + computed: {
  24 + parentName () {
  25 + return this.parentItem.name
  26 + },
  27 + children () {
  28 + return this.parentItem.children
  29 + }
  30 + }
  31 +}
  32 +</script>
... ...
examples/routers/menu.vue
  Show/Hide comments   View file @2b24fcc
... ... @@ -44,14 +44,92 @@
44 44 <MenuItem name="5-4">Option 12</MenuItem>
45 45 </Submenu>
46 46 </Menu>
  47 + <!-- <Menu theme="dark" accordion @on-open-change="handleOpenChange">
  48 + <template v-for="item in menuList">
  49 + <custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
  50 + <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
  51 + </template>
  52 + </Menu>
47 53 <Button @click="setOpenNames">修改展开数组</Button>
  54 + <Button @click="addNewItem">添加菜单项</Button> -->
48 55 </div>
49 56 </template>
50 57 <script>
  58 +import custemMenuItem from './menu-item.vue'
51 59 export default {
  60 + components: {
  61 + custemMenuItem
  62 + },
52 63 data () {
53 64 return {
54   - openNames: ['1']
  65 + openNames: ['1'],
  66 + menuList: [
  67 + {
  68 + name: '111',
  69 + children: [
  70 + {
  71 + name: '111-111'
  72 + },
  73 + {
  74 + name: '111-222'
  75 + }
  76 + ]
  77 + },
  78 + {
  79 + name: '222',
  80 + children: [
  81 + {
  82 + name: '222-111'
  83 + },
  84 + {
  85 + name: '222-222',
  86 + children: [
  87 + {
  88 + name: '222-222-111'
  89 + },
  90 + {
  91 + name: '222-222-222',
  92 + children: [
  93 + {
  94 + name: '222-222-222-111'
  95 + },
  96 + {
  97 + name: '222-222-222-222'
  98 + }
  99 + ]
  100 + }
  101 + ]
  102 + },
  103 + {
  104 + name: '222-333',
  105 + children: [
  106 + {
  107 + name: '222-333-111',
  108 + children: [
  109 + {
  110 + name: '222-333-111-111'
  111 + },
  112 + {
  113 + name: '222-333-111-222'
  114 + }
  115 + ]
  116 + },
  117 + {
  118 + name: '222-333-222',
  119 + children: [
  120 + {
  121 + name: '222-333-222-111'
  122 + },
  123 + {
  124 + name: '222-333-222-222'
  125 + }
  126 + ]
  127 + }
  128 + ]
  129 + }
  130 + ]
  131 + }
  132 + ]
55 133 };
56 134 },
57 135 methods: {
... ... @@ -63,6 +141,16 @@
63 141 this.$nextTick(() => {
64 142 this.$refs.menu.updateOpened();
65 143 })
  144 + },
  145 + addNewItem () {
  146 + this.menuList[1].children[1].children.push({
  147 + name: '222-222-333',
  148 + children: [
  149 + {
  150 + name: '222-222-333-111'
  151 + }
  152 + ]
  153 + })
66 154 }
67 155 }
68 156 }
... ...
package-lock.json
  Show/Hide comments   View file @2b24fcc
1 1 {
2 2 "name": "iview",
3   - "version": "2.13.1",
  3 + "version": "2.14.0-rc.1",
4 4 "lockfileVersion": 1,
5 5 "requires": true,
6 6 "dependencies": {
7 7 "@sinonjs/formatio": {
8 8 "version": "2.0.0",
9   - "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
  9 + "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
10 10 "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
11 11 "dev": true,
12 12 "requires": {
... ... @@ -2315,7 +2315,7 @@
2315 2315 },
2316 2316 "compression": {
2317 2317 "version": "1.7.2",
2318   - "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
  2318 + "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
2319 2319 "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
2320 2320 "dev": true,
2321 2321 "requires": {
... ... @@ -9278,7 +9278,7 @@
9278 9278 },
9279 9279 "onetime": {
9280 9280 "version": "1.1.0",
9281   - "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
  9281 + "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
9282 9282 "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
9283 9283 "dev": true
9284 9284 },
... ...
package.json
  Show/Hide comments   View file @2b24fcc
... ... @@ -19,7 +19,7 @@
19 19 "src"
20 20 ],
21 21 "scripts": {
22   - "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
  22 + "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 1234 --config build/webpack.dev.config.js",
23 23 "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",
24 24 "dist:style": "gulp --gulpfile build/build-style.js",
25 25 "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
... ...
src/components/menu/menu.vue
  Show/Hide comments   View file @2b24fcc
... ... @@ -2,7 +2,7 @@
2 2 <ul :class="classes" :style="styles"><slot></slot></ul>
3 3 </template>
4 4 <script>
5   - import { oneOf, findComponentsDownward, findBrothersComponents } from '../../utils/assist';
  5 + import { oneOf, findComponentsDownward, findComponentsUpward } from '../../utils/assist';
6 6 import Emitter from '../../mixins/emitter';
7 7  
8 8 const prefixCls = 'ivu-menu';
... ... @@ -84,17 +84,18 @@
84 84 } else {
85 85 if (this.accordion) {
86 86 let currentSubmenu = null;
  87 + names = [];
87 88 findComponentsDownward(this, 'Submenu').forEach(item => {
88 89 if (item.name === name) currentSubmenu = item;
89 90 });
90   - findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
91   - let i = names.indexOf(item.name);
92   - if (i >= 0) names.splice(i, 1);
  91 + findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
  92 + names.push(item.name);
93 93 });
94 94 }
95 95 names.push(name);
96 96 }
97 97 this.openedNames = names;
  98 + this.updateOpened();
98 99 this.$emit('on-open-change', this.openedNames);
99 100 },
100 101 updateOpened () {
... ...
src/components/menu/mixin.js
  Show/Hide comments   View file @2b24fcc
... ... @@ -16,4 +16,4 @@ export default {
16 16 return this.menu.mode;
17 17 }
18 18 }
19   -};
20 19 \ No newline at end of file
  20 +};
... ...
src/utils/assist.js
  Show/Hide comments   View file @2b24fcc
... ... @@ -234,7 +234,9 @@ export function findBrothersComponents (context, componentName, exceptMe = true)
234 234 let res = context.$parent.$children.filter(item => {
235 235 return item.$options.name === componentName;
236 236 });
237   - let index = res.indexOf(context);
  237 + let index = res.findIndex(item => {
  238 + return item._uid === context._uid;
  239 + });
238 240 if (exceptMe) res.splice(index, 1);
239 241 return res;
240 242 }
... ... @@ -322,3 +324,15 @@ export function setMatchMedia () {
322 324 window.matchMedia = window.matchMedia || matchMediaPolyfill;
323 325 }
324 326 }
  327 +
  328 +export function getCommonString (arr1, arr2) {
  329 + const len1 = arr1.length;
  330 + const len2 = arr2.length;
  331 + let i = -1;
  332 + const len = Math.min(len1, len2);
  333 + let res = [];
  334 + while (++i < len) {
  335 + if (arr1.indexOf(arr2[i]) >= 0) res.push(arr2[i]);
  336 + }
  337 + return res;
  338 +}
... ...