Commit 7b487076fdcff5be8b8297a9aa53f7e7e1283389
1 parent
d6fc746e
fix
Showing
7 changed files
with
50 additions
and
37 deletions
Show diff stats
src/components/mew-menu/index.js
| 1 | -import Menu from './menu.vue'; | |
| 2 | -import MenuGroup from './menu-group.vue'; | |
| 3 | -import MenuItem from './menu-item.vue'; | |
| 4 | -import Submenu from './submenu.vue'; | |
| 1 | +import MewMenu from './menu.vue'; | |
| 2 | +import MewMenuGroup from './menu-group.vue'; | |
| 3 | +import MewMenuItem from './menu-item.vue'; | |
| 4 | +import MewSubmenu from './submenu.vue'; | |
| 5 | 5 | |
| 6 | -Menu.Group = MenuGroup; | |
| 7 | -Menu.Item = MenuItem; | |
| 8 | -Menu.Sub = Submenu; | |
| 6 | +MewMenu.Group = MewMenuGroup; | |
| 7 | +MewMenu.Item = MewMenuItem; | |
| 8 | +MewMenu.Sub = MewSubmenu; | |
| 9 | 9 | |
| 10 | -export default Menu; | |
| 11 | 10 | \ No newline at end of file |
| 11 | +export default MewMenu; | |
| 12 | 12 | \ No newline at end of file | ... | ... |
src/components/mew-menu/menu-item.vue
| ... | ... | @@ -12,14 +12,14 @@ |
| 12 | 12 | </template> |
| 13 | 13 | <script> |
| 14 | 14 | import Emitter from '../../mixins/emitter'; |
| 15 | - import { findComponentUpward } from '../../utils/assist'; | |
| 15 | + import { findComponentUpward, findBrothersComponents, findComponentsDownward } from '../../utils/assist'; | |
| 16 | 16 | import mixin from './mixin'; |
| 17 | 17 | import mixinsLink from '../../mixins/link'; |
| 18 | 18 | |
| 19 | 19 | const prefixCls = 'ivu-menu'; |
| 20 | 20 | |
| 21 | 21 | export default { |
| 22 | - name: 'MenuItem', | |
| 22 | + name: 'MewMenuItem', | |
| 23 | 23 | mixins: [ Emitter, mixin, mixinsLink ], |
| 24 | 24 | props: { |
| 25 | 25 | name: { |
| ... | ... | @@ -60,16 +60,22 @@ |
| 60 | 60 | if (new_window || this.target === '_blank') { |
| 61 | 61 | // 如果是 new_window,直接新开窗口就行,无需发送状态 |
| 62 | 62 | this.handleCheckClick(event, new_window); |
| 63 | - let parentMenu = findComponentUpward(this, 'Menu'); | |
| 63 | + let parentMenu = findComponentUpward(this, 'MewMenu'); | |
| 64 | 64 | if (parentMenu) parentMenu.handleEmitSelectEvent(this.name); |
| 65 | 65 | } else { |
| 66 | - let parent = findComponentUpward(this, 'Submenu'); | |
| 66 | + let parent = findComponentUpward(this, 'MewSubmenu'); | |
| 67 | 67 | |
| 68 | 68 | if (parent) { |
| 69 | - this.dispatch('Submenu', 'on-menu-item-select', this.name); | |
| 69 | + this.dispatch('MewSubmenu', 'on-menu-item-select', this.name); | |
| 70 | 70 | } else { |
| 71 | - this.dispatch('Menu', 'on-menu-item-select', this.name); | |
| 71 | + this.dispatch('MewMenu', 'on-menu-item-select', this.name); | |
| 72 | 72 | } |
| 73 | + findBrothersComponents(this, 'SideMenuItem',false).forEach(item => { | |
| 74 | + findComponentsDownward(item, 'MewSubmenu').forEach(item => { | |
| 75 | + item.active = false; | |
| 76 | + item.opened = false | |
| 77 | + }); | |
| 78 | + }); | |
| 73 | 79 | |
| 74 | 80 | this.handleCheckClick(event, new_window); |
| 75 | 81 | } |
| ... | ... | @@ -79,7 +85,7 @@ |
| 79 | 85 | this.$on('on-update-active-name', (name) => { |
| 80 | 86 | if (this.name === name) { |
| 81 | 87 | this.active = true; |
| 82 | - this.dispatch('Submenu', 'on-update-active-name', name); | |
| 88 | + this.dispatch('MewSubmenu', 'on-update-active-name', name); | |
| 83 | 89 | } else { |
| 84 | 90 | this.active = false; |
| 85 | 91 | } | ... | ... |
src/components/mew-menu/menu.vue
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | const prefixCls = 'ivu-menu'; |
| 9 | 9 | |
| 10 | 10 | export default { |
| 11 | - name: 'Menu', | |
| 11 | + name: 'MewMenu', | |
| 12 | 12 | mixins: [ Emitter ], |
| 13 | 13 | props: { |
| 14 | 14 | mode: { |
| ... | ... | @@ -73,53 +73,53 @@ |
| 73 | 73 | if (this.currentActiveName === undefined) { |
| 74 | 74 | this.currentActiveName = -1; |
| 75 | 75 | } |
| 76 | - this.broadcast('Submenu', 'on-update-active-name', false); | |
| 77 | - this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName); | |
| 76 | + this.broadcast('MewSubmenu', 'on-update-active-name', false); | |
| 77 | + this.broadcast('MewMenuItem', 'on-update-active-name', this.currentActiveName); | |
| 78 | 78 | }, |
| 79 | 79 | updateOpenKeys (name) { |
| 80 | 80 | let names = [...this.openedNames]; |
| 81 | 81 | const index = names.indexOf(name); |
| 82 | - if (this.accordion) findComponentsDownward(this, 'Submenu').forEach(item => { | |
| 82 | + if (this.accordion) findComponentsDownward(this, 'MewSubmenu').forEach(item => { | |
| 83 | 83 | item.opened = false; |
| 84 | 84 | }); |
| 85 | 85 | if (index >= 0) { |
| 86 | 86 | let currentSubmenu = null; |
| 87 | - findComponentsDownward(this, 'Submenu').forEach(item => { | |
| 87 | + findComponentsDownward(this, 'MewSubmenu').forEach(item => { | |
| 88 | 88 | if (item.name === name) { |
| 89 | 89 | currentSubmenu = item; |
| 90 | 90 | item.opened = false; |
| 91 | 91 | } |
| 92 | 92 | }); |
| 93 | - findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => { | |
| 93 | + findComponentsUpward(currentSubmenu, 'MewSubmenu').forEach(item => { | |
| 94 | 94 | item.opened = true; |
| 95 | 95 | }); |
| 96 | - findComponentsDownward(currentSubmenu, 'Submenu').forEach(item => { | |
| 96 | + findComponentsDownward(currentSubmenu, 'MewSubmenu').forEach(item => { | |
| 97 | 97 | item.opened = false; |
| 98 | 98 | }); |
| 99 | 99 | } else { |
| 100 | 100 | if (this.accordion) { |
| 101 | 101 | let currentSubmenu = null; |
| 102 | - findComponentsDownward(this, 'Submenu').forEach(item => { | |
| 102 | + findComponentsDownward(this, 'MewSubmenu').forEach(item => { | |
| 103 | 103 | if (item.name === name) { |
| 104 | 104 | currentSubmenu = item; |
| 105 | 105 | item.opened = true; |
| 106 | 106 | } |
| 107 | 107 | }); |
| 108 | - findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => { | |
| 108 | + findComponentsUpward(currentSubmenu, 'MewSubmenu').forEach(item => { | |
| 109 | 109 | item.opened = true; |
| 110 | 110 | }); |
| 111 | 111 | } else { |
| 112 | - findComponentsDownward(this, 'Submenu').forEach(item => { | |
| 112 | + findComponentsDownward(this, 'MewSubmenu').forEach(item => { | |
| 113 | 113 | if (item.name === name) item.opened = true; |
| 114 | 114 | }); |
| 115 | 115 | } |
| 116 | 116 | } |
| 117 | - let openedNames = findComponentsDownward(this, 'Submenu').filter(item => item.opened).map(item => item.name); | |
| 117 | + let openedNames = findComponentsDownward(this, 'MewSubmenu').filter(item => item.opened).map(item => item.name); | |
| 118 | 118 | this.openedNames = [...openedNames]; |
| 119 | 119 | this.$emit('on-open-change', openedNames); |
| 120 | 120 | }, |
| 121 | 121 | updateOpened () { |
| 122 | - const items = findComponentsDownward(this, 'Submenu'); | |
| 122 | + const items = findComponentsDownward(this, 'MewSubmenu'); | |
| 123 | 123 | |
| 124 | 124 | if (items.length) { |
| 125 | 125 | items.forEach(item => { | ... | ... |
src/components/mew-menu/mixin.js
| ... | ... | @@ -2,15 +2,15 @@ import { findComponentUpward, findComponentsUpward } from '../../utils/assist'; |
| 2 | 2 | export default { |
| 3 | 3 | data () { |
| 4 | 4 | return { |
| 5 | - menu: findComponentUpward(this, 'Menu') | |
| 5 | + menu: findComponentUpward(this, 'MewMenu') | |
| 6 | 6 | }; |
| 7 | 7 | }, |
| 8 | 8 | computed: { |
| 9 | 9 | hasParentSubmenu () { |
| 10 | - return !!findComponentUpward(this, 'Submenu'); | |
| 10 | + return !!findComponentUpward(this, 'MewSubmenu'); | |
| 11 | 11 | }, |
| 12 | 12 | parentSubmenuNum () { |
| 13 | - return findComponentsUpward(this, 'Submenu').length; | |
| 13 | + return findComponentsUpward(this, 'MewSubmenu').length; | |
| 14 | 14 | }, |
| 15 | 15 | mode () { |
| 16 | 16 | return this.menu.mode; | ... | ... |
src/components/mew-menu/submenu.vue
| ... | ... | @@ -28,7 +28,7 @@ |
| 28 | 28 | const prefixCls = 'ivu-menu'; |
| 29 | 29 | |
| 30 | 30 | export default { |
| 31 | - name: 'Submenu', | |
| 31 | + name: 'MewSubmenu', | |
| 32 | 32 | mixins: [ Emitter, mixin ], |
| 33 | 33 | components: { Icon, Drop, CollapseTransition }, |
| 34 | 34 | props: { |
| ... | ... | @@ -78,7 +78,7 @@ |
| 78 | 78 | }, |
| 79 | 79 | // 3.4.0, global setting customArrow 有值时,arrow 赋值空 |
| 80 | 80 | arrowType () { |
| 81 | - let type = 'ios-arrow-down'; | |
| 81 | + let type = 'ios-arrow-forward'; | |
| 82 | 82 | |
| 83 | 83 | if (this.$IVIEW) { |
| 84 | 84 | if (this.$IVIEW.menu.customArrow) { |
| ... | ... | @@ -166,12 +166,12 @@ |
| 166 | 166 | mounted () { |
| 167 | 167 | this.$on('on-menu-item-select', (name) => { |
| 168 | 168 | if (this.mode === 'horizontal') this.opened = false; |
| 169 | - this.dispatch('Menu', 'on-menu-item-select', name); | |
| 169 | + this.dispatch('MewMenu', 'on-menu-item-select', name); | |
| 170 | 170 | return true; |
| 171 | 171 | }); |
| 172 | 172 | this.$on('on-update-active-name', (status) => { |
| 173 | - if (findComponentUpward(this, 'Submenu')) this.dispatch('Submenu', 'on-update-active-name', status); | |
| 174 | - if (findComponentsDownward(this, 'Submenu')) findComponentsDownward(this, 'Submenu').forEach(item => { | |
| 173 | + if (findComponentUpward(this, 'MewSubmenu')) this.dispatch('MewSubmenu', 'on-update-active-name', status); | |
| 174 | + if (findComponentsDownward(this, 'MewSubmenu')) findComponentsDownward(this, 'MewSubmenu').forEach(item => { | |
| 175 | 175 | item.active = false; |
| 176 | 176 | }); |
| 177 | 177 | this.active = status; | ... | ... |
src/styles/components/menu.less
| ... | ... | @@ -178,7 +178,6 @@ |
| 178 | 178 | transform: rotate(180deg); |
| 179 | 179 | } |
| 180 | 180 | &-vertical &-opened > * > &-submenu-title-icon{ |
| 181 | - transform: translateY(-50%) rotate(180deg); | |
| 182 | 181 | } |
| 183 | 182 | |
| 184 | 183 | &-vertical &-submenu{ |
| ... | ... | @@ -240,6 +239,7 @@ |
| 240 | 239 | &-active:not(.@{menu-prefix-cls}-submenu){ |
| 241 | 240 | /*wynn*/ |
| 242 | 241 | color: @mew-common-color; |
| 242 | + background: #f6f6f6; | |
| 243 | 243 | //border-right: 2px solid @primary-color; |
| 244 | 244 | } |
| 245 | 245 | } |
| ... | ... | @@ -266,7 +266,7 @@ |
| 266 | 266 | &-dark&-vertical &-opened{ |
| 267 | 267 | background: @menu-dark-active-bg; |
| 268 | 268 | .@{menu-prefix-cls}-submenu-title{ |
| 269 | - background: @menu-dark-title; | |
| 269 | + background: #f6f6f6; | |
| 270 | 270 | } |
| 271 | 271 | |
| 272 | 272 | .@{menu-prefix-cls}-submenu-has-parent-submenu{ | ... | ... |
src/utils/assist.js
| ... | ... | @@ -235,8 +235,15 @@ export function findComponentsUpward (context, componentName) { |
| 235 | 235 | // Find brothers components |
| 236 | 236 | export function findBrothersComponents (context, componentName, exceptMe = true) { |
| 237 | 237 | let res = context.$parent.$children.filter(item => { |
| 238 | + if(componentName === "SideMenuItem"){ | |
| 239 | + console.log(item) | |
| 240 | + console.log(item.$options.name) | |
| 241 | + } | |
| 238 | 242 | return item.$options.name === componentName; |
| 239 | 243 | }); |
| 244 | + if(componentName === "SideMenuItem"){ | |
| 245 | + console.log(res) | |
| 246 | + } | |
| 240 | 247 | let index = res.findIndex(item => item._uid === context._uid); |
| 241 | 248 | if (exceptMe) res.splice(index, 1); |
| 242 | 249 | return res; | ... | ... |