mirror of https://github.com/ElemeFE/element
Menu: fix setAttribute error
parent
399161eacc
commit
186143b138
|
@ -1,8 +1,8 @@
|
||||||
export default {
|
export default {
|
||||||
computed: {
|
computed: {
|
||||||
indexPath() {
|
indexPath() {
|
||||||
var path = [this.index];
|
const path = [this.index];
|
||||||
var parent = this.$parent;
|
let parent = this.$parent;
|
||||||
while (parent.$options.componentName !== 'ElMenu') {
|
while (parent.$options.componentName !== 'ElMenu') {
|
||||||
if (parent.index) {
|
if (parent.index) {
|
||||||
path.unshift(parent.index);
|
path.unshift(parent.index);
|
||||||
|
@ -12,7 +12,7 @@ export default {
|
||||||
return path;
|
return path;
|
||||||
},
|
},
|
||||||
rootMenu() {
|
rootMenu() {
|
||||||
var parent = this.$parent;
|
let parent = this.$parent;
|
||||||
while (
|
while (
|
||||||
parent &&
|
parent &&
|
||||||
parent.$options.componentName !== 'ElMenu'
|
parent.$options.componentName !== 'ElMenu'
|
||||||
|
|
|
@ -262,9 +262,8 @@
|
||||||
this.$on('item-click', this.handleItemClick);
|
this.$on('item-click', this.handleItemClick);
|
||||||
this.$on('submenu-click', this.handleSubmenuClick);
|
this.$on('submenu-click', this.handleSubmenuClick);
|
||||||
if (this.mode === 'horizontal') {
|
if (this.mode === 'horizontal') {
|
||||||
let menu = new Menubar(this.$el); // eslint-disable-line
|
new Menubar(this.$el); // eslint-disable-line
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import MenuItem from './aria-menuitem';
|
import MenuItem from './aria-menuitem';
|
||||||
|
|
||||||
var menu = function(domNode) {
|
const Menu = function(domNode) {
|
||||||
this.domNode = domNode;
|
this.domNode = domNode;
|
||||||
this.init();
|
this.init();
|
||||||
};
|
};
|
||||||
|
|
||||||
menu.prototype.init = function() {
|
Menu.prototype.init = function() {
|
||||||
let menuChild = this.domNode.childNodes;
|
let menuChildren = this.domNode.childNodes;
|
||||||
menuChild.forEach((child) => {
|
[].filter.call(menuChildren, child => child.nodeType === 1).forEach(child => {
|
||||||
let menuItem = new MenuItem(child); // eslint-disable-line
|
new MenuItem(child); // eslint-disable-line
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
export default menu;
|
export default Menu;
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import Utils from '../aria-utils';
|
import Utils from '../aria-utils';
|
||||||
import SubMenu from './aria-submenu';
|
import SubMenu from './aria-submenu';
|
||||||
|
|
||||||
var menuItem = function(domNode) {
|
const MenuItem = function(domNode) {
|
||||||
this.domNode = domNode;
|
this.domNode = domNode;
|
||||||
this.submenu = null;
|
this.submenu = null;
|
||||||
this.init();
|
this.init();
|
||||||
};
|
};
|
||||||
|
|
||||||
menuItem.prototype.init = function() {
|
MenuItem.prototype.init = function() {
|
||||||
this.domNode.setAttribute('tabindex', '0');
|
this.domNode.setAttribute('tabindex', '0');
|
||||||
let menuChild = this.domNode.querySelector('.el-menu');
|
let menuChild = this.domNode.querySelector('.el-menu');
|
||||||
if (menuChild) {
|
if (menuChild) {
|
||||||
|
@ -16,34 +16,34 @@ menuItem.prototype.init = function() {
|
||||||
this.addListeners();
|
this.addListeners();
|
||||||
};
|
};
|
||||||
|
|
||||||
menuItem.prototype.addListeners = function() {
|
MenuItem.prototype.addListeners = function() {
|
||||||
const keys = Utils.keys;
|
const keys = Utils.keys;
|
||||||
this.domNode.addEventListener('keydown', event => {
|
this.domNode.addEventListener('keydown', event => {
|
||||||
var prevdef = false;
|
let prevDef = false;
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case keys.down:
|
case keys.down:
|
||||||
Utils.triggerEvent(event.currentTarget, 'mouseenter');
|
Utils.triggerEvent(event.currentTarget, 'mouseenter');
|
||||||
this.submenu.gotoSubIndex(0);
|
this.submenu.gotoSubIndex(0);
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
break;
|
break;
|
||||||
case keys.up:
|
case keys.up:
|
||||||
Utils.triggerEvent(event.currentTarget, 'mouseenter');
|
Utils.triggerEvent(event.currentTarget, 'mouseenter');
|
||||||
this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
|
this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
break;
|
break;
|
||||||
case keys.tab:
|
case keys.tab:
|
||||||
Utils.triggerEvent(event.currentTarget, 'mouseleave');
|
Utils.triggerEvent(event.currentTarget, 'mouseleave');
|
||||||
break;
|
break;
|
||||||
case keys.enter:
|
case keys.enter:
|
||||||
case keys.space:
|
case keys.space:
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
event.currentTarget.click();
|
event.currentTarget.click();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (prevdef) {
|
if (prevDef) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export default menuItem;
|
export default MenuItem;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Utils from '../aria-utils';
|
import Utils from '../aria-utils';
|
||||||
|
|
||||||
var Menu = function(parent, domNode) {
|
const SubMenu = function(parent, domNode) {
|
||||||
this.domNode = domNode;
|
this.domNode = domNode;
|
||||||
this.parent = parent;
|
this.parent = parent;
|
||||||
this.subMenuItems = [];
|
this.subMenuItems = [];
|
||||||
|
@ -8,12 +8,12 @@ var Menu = function(parent, domNode) {
|
||||||
this.init();
|
this.init();
|
||||||
};
|
};
|
||||||
|
|
||||||
Menu.prototype.init = function() {
|
SubMenu.prototype.init = function() {
|
||||||
this.subMenuItems = this.domNode.querySelectorAll('li');
|
this.subMenuItems = this.domNode.querySelectorAll('li');
|
||||||
this.addListeners();
|
this.addListeners();
|
||||||
};
|
};
|
||||||
|
|
||||||
Menu.prototype.gotoSubIndex = function(idx) {
|
SubMenu.prototype.gotoSubIndex = function(idx) {
|
||||||
if (idx === this.subMenuItems.length) {
|
if (idx === this.subMenuItems.length) {
|
||||||
idx = 0;
|
idx = 0;
|
||||||
} else if (idx < 0) {
|
} else if (idx < 0) {
|
||||||
|
@ -23,31 +23,31 @@ Menu.prototype.gotoSubIndex = function(idx) {
|
||||||
this.subIndex = idx;
|
this.subIndex = idx;
|
||||||
};
|
};
|
||||||
|
|
||||||
Menu.prototype.addListeners = function() {
|
SubMenu.prototype.addListeners = function() {
|
||||||
const keys = Utils.keys;
|
const keys = Utils.keys;
|
||||||
const parentNode = this.parent.domNode;
|
const parentNode = this.parent.domNode;
|
||||||
Array.prototype.forEach.call(this.subMenuItems, el => {
|
Array.prototype.forEach.call(this.subMenuItems, el => {
|
||||||
el.addEventListener('keydown', event => {
|
el.addEventListener('keydown', event => {
|
||||||
let prevdef = false;
|
let prevDef = false;
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case keys.down:
|
case keys.down:
|
||||||
this.gotoSubIndex(this.subIndex + 1);
|
this.gotoSubIndex(this.subIndex + 1);
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
break;
|
break;
|
||||||
case keys.up:
|
case keys.up:
|
||||||
this.gotoSubIndex(this.subIndex - 1);
|
this.gotoSubIndex(this.subIndex - 1);
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
break;
|
break;
|
||||||
case keys.tab:
|
case keys.tab:
|
||||||
Utils.triggerEvent(parentNode, 'mouseleave');
|
Utils.triggerEvent(parentNode, 'mouseleave');
|
||||||
break;
|
break;
|
||||||
case keys.enter:
|
case keys.enter:
|
||||||
case keys.space:
|
case keys.space:
|
||||||
prevdef = true;
|
prevDef = true;
|
||||||
event.currentTarget.click();
|
event.currentTarget.click();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (prevdef) {
|
if (prevDef) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
@ -56,4 +56,4 @@ Menu.prototype.addListeners = function() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Menu;
|
export default SubMenu;
|
||||||
|
|
Loading…
Reference in New Issue