menu.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, {
  41. /******/ configurable: false,
  42. /******/ enumerable: true,
  43. /******/ get: getter
  44. /******/ });
  45. /******/ }
  46. /******/ };
  47. /******/
  48. /******/ // getDefaultExport function for compatibility with non-harmony modules
  49. /******/ __webpack_require__.n = function(module) {
  50. /******/ var getter = module && module.__esModule ?
  51. /******/ function getDefault() { return module['default']; } :
  52. /******/ function getModuleExports() { return module; };
  53. /******/ __webpack_require__.d(getter, 'a', getter);
  54. /******/ return getter;
  55. /******/ };
  56. /******/
  57. /******/ // Object.prototype.hasOwnProperty.call
  58. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  59. /******/
  60. /******/ // __webpack_public_path__
  61. /******/ __webpack_require__.p = "/dist/";
  62. /******/
  63. /******/ // Load entry module and return exports
  64. /******/ return __webpack_require__(__webpack_require__.s = 88);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 0:
  69. /***/ (function(module, exports) {
  70. /* globals __VUE_SSR_CONTEXT__ */
  71. // IMPORTANT: Do NOT use ES2015 features in this file.
  72. // This module is a runtime utility for cleaner component module output and will
  73. // be included in the final webpack user bundle.
  74. module.exports = function normalizeComponent (
  75. rawScriptExports,
  76. compiledTemplate,
  77. functionalTemplate,
  78. injectStyles,
  79. scopeId,
  80. moduleIdentifier /* server only */
  81. ) {
  82. var esModule
  83. var scriptExports = rawScriptExports = rawScriptExports || {}
  84. // ES6 modules interop
  85. var type = typeof rawScriptExports.default
  86. if (type === 'object' || type === 'function') {
  87. esModule = rawScriptExports
  88. scriptExports = rawScriptExports.default
  89. }
  90. // Vue.extend constructor export interop
  91. var options = typeof scriptExports === 'function'
  92. ? scriptExports.options
  93. : scriptExports
  94. // render functions
  95. if (compiledTemplate) {
  96. options.render = compiledTemplate.render
  97. options.staticRenderFns = compiledTemplate.staticRenderFns
  98. options._compiled = true
  99. }
  100. // functional template
  101. if (functionalTemplate) {
  102. options.functional = true
  103. }
  104. // scopedId
  105. if (scopeId) {
  106. options._scopeId = scopeId
  107. }
  108. var hook
  109. if (moduleIdentifier) { // server build
  110. hook = function (context) {
  111. // 2.3 injection
  112. context =
  113. context || // cached call
  114. (this.$vnode && this.$vnode.ssrContext) || // stateful
  115. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  116. // 2.2 with runInNewContext: true
  117. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  118. context = __VUE_SSR_CONTEXT__
  119. }
  120. // inject component styles
  121. if (injectStyles) {
  122. injectStyles.call(this, context)
  123. }
  124. // register component module identifier for async chunk inferrence
  125. if (context && context._registeredComponents) {
  126. context._registeredComponents.add(moduleIdentifier)
  127. }
  128. }
  129. // used by ssr in case component is cached and beforeCreate
  130. // never gets called
  131. options._ssrRegister = hook
  132. } else if (injectStyles) {
  133. hook = injectStyles
  134. }
  135. if (hook) {
  136. var functional = options.functional
  137. var existing = functional
  138. ? options.render
  139. : options.beforeCreate
  140. if (!functional) {
  141. // inject component registration as beforeCreate hook
  142. options.beforeCreate = existing
  143. ? [].concat(existing, hook)
  144. : [hook]
  145. } else {
  146. // for template-only hot-reload because in that case the render fn doesn't
  147. // go through the normalizer
  148. options._injectStyles = hook
  149. // register for functioal component in vue file
  150. options.render = function renderWithStyleInjection (h, context) {
  151. hook.call(context)
  152. return existing(h, context)
  153. }
  154. }
  155. }
  156. return {
  157. esModule: esModule,
  158. exports: scriptExports,
  159. options: options
  160. }
  161. }
  162. /***/ }),
  163. /***/ 1:
  164. /***/ (function(module, exports) {
  165. module.exports = require("element-ui/lib/mixins/emitter");
  166. /***/ }),
  167. /***/ 2:
  168. /***/ (function(module, exports) {
  169. module.exports = require("element-ui/lib/utils/dom");
  170. /***/ }),
  171. /***/ 46:
  172. /***/ (function(module, exports, __webpack_require__) {
  173. "use strict";
  174. exports.__esModule = true;
  175. var aria = aria || {};
  176. aria.Utils = aria.Utils || {};
  177. /**
  178. * @desc Set focus on descendant nodes until the first focusable element is
  179. * found.
  180. * @param element
  181. * DOM node for which to find the first focusable descendant.
  182. * @returns
  183. * true if a focusable element is found and focus is set.
  184. */
  185. aria.Utils.focusFirstDescendant = function (element) {
  186. for (var i = 0; i < element.childNodes.length; i++) {
  187. var child = element.childNodes[i];
  188. if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
  189. return true;
  190. }
  191. }
  192. return false;
  193. };
  194. /**
  195. * @desc Find the last descendant node that is focusable.
  196. * @param element
  197. * DOM node for which to find the last focusable descendant.
  198. * @returns
  199. * true if a focusable element is found and focus is set.
  200. */
  201. aria.Utils.focusLastDescendant = function (element) {
  202. for (var i = element.childNodes.length - 1; i >= 0; i--) {
  203. var child = element.childNodes[i];
  204. if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
  205. return true;
  206. }
  207. }
  208. return false;
  209. };
  210. /**
  211. * @desc Set Attempt to set focus on the current node.
  212. * @param element
  213. * The node to attempt to focus on.
  214. * @returns
  215. * true if element is focused.
  216. */
  217. aria.Utils.attemptFocus = function (element) {
  218. if (!aria.Utils.isFocusable(element)) {
  219. return false;
  220. }
  221. aria.Utils.IgnoreUtilFocusChanges = true;
  222. try {
  223. element.focus();
  224. } catch (e) {}
  225. aria.Utils.IgnoreUtilFocusChanges = false;
  226. return document.activeElement === element;
  227. };
  228. aria.Utils.isFocusable = function (element) {
  229. if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
  230. return true;
  231. }
  232. if (element.disabled) {
  233. return false;
  234. }
  235. switch (element.nodeName) {
  236. case 'A':
  237. return !!element.href && element.rel !== 'ignore';
  238. case 'INPUT':
  239. return element.type !== 'hidden' && element.type !== 'file';
  240. case 'BUTTON':
  241. case 'SELECT':
  242. case 'TEXTAREA':
  243. return true;
  244. default:
  245. return false;
  246. }
  247. };
  248. /**
  249. * 触发一个事件
  250. * mouseenter, mouseleave, mouseover, keyup, change, click 等
  251. * @param {Element} elm
  252. * @param {String} name
  253. * @param {*} opts
  254. */
  255. aria.Utils.triggerEvent = function (elm, name) {
  256. var eventName = void 0;
  257. if (/^mouse|click/.test(name)) {
  258. eventName = 'MouseEvents';
  259. } else if (/^key/.test(name)) {
  260. eventName = 'KeyboardEvent';
  261. } else {
  262. eventName = 'HTMLEvents';
  263. }
  264. var evt = document.createEvent(eventName);
  265. for (var _len = arguments.length, opts = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
  266. opts[_key - 2] = arguments[_key];
  267. }
  268. evt.initEvent.apply(evt, [name].concat(opts));
  269. elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt);
  270. return elm;
  271. };
  272. aria.Utils.keys = {
  273. tab: 9,
  274. enter: 13,
  275. space: 32,
  276. left: 37,
  277. up: 38,
  278. right: 39,
  279. down: 40
  280. };
  281. exports.default = aria.Utils;
  282. /***/ }),
  283. /***/ 7:
  284. /***/ (function(module, exports) {
  285. module.exports = require("element-ui/lib/mixins/migrating");
  286. /***/ }),
  287. /***/ 88:
  288. /***/ (function(module, exports, __webpack_require__) {
  289. module.exports = __webpack_require__(89);
  290. /***/ }),
  291. /***/ 89:
  292. /***/ (function(module, exports, __webpack_require__) {
  293. "use strict";
  294. exports.__esModule = true;
  295. var _menu = __webpack_require__(90);
  296. var _menu2 = _interopRequireDefault(_menu);
  297. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  298. /* istanbul ignore next */
  299. _menu2.default.install = function (Vue) {
  300. Vue.component(_menu2.default.name, _menu2.default);
  301. };
  302. exports.default = _menu2.default;
  303. /***/ }),
  304. /***/ 90:
  305. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  306. "use strict";
  307. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  308. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__ = __webpack_require__(91);
  309. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__);
  310. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_700225d6_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_menu_vue__ = __webpack_require__(95);
  311. var normalizeComponent = __webpack_require__(0)
  312. /* script */
  313. /* template */
  314. /* template functional */
  315. var __vue_template_functional__ = false
  316. /* styles */
  317. var __vue_styles__ = null
  318. /* scopeId */
  319. var __vue_scopeId__ = null
  320. /* moduleIdentifier (server only) */
  321. var __vue_module_identifier__ = null
  322. var Component = normalizeComponent(
  323. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default.a,
  324. __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_700225d6_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_menu_vue__["a" /* default */],
  325. __vue_template_functional__,
  326. __vue_styles__,
  327. __vue_scopeId__,
  328. __vue_module_identifier__
  329. )
  330. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  331. /***/ }),
  332. /***/ 91:
  333. /***/ (function(module, exports, __webpack_require__) {
  334. "use strict";
  335. exports.__esModule = true;
  336. var _emitter = __webpack_require__(1);
  337. var _emitter2 = _interopRequireDefault(_emitter);
  338. var _migrating = __webpack_require__(7);
  339. var _migrating2 = _interopRequireDefault(_migrating);
  340. var _ariaMenubar = __webpack_require__(92);
  341. var _ariaMenubar2 = _interopRequireDefault(_ariaMenubar);
  342. var _dom = __webpack_require__(2);
  343. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  344. //
  345. //
  346. //
  347. //
  348. //
  349. //
  350. //
  351. //
  352. //
  353. //
  354. //
  355. //
  356. //
  357. //
  358. //
  359. exports.default = {
  360. name: 'ElMenu',
  361. componentName: 'ElMenu',
  362. mixins: [_emitter2.default, _migrating2.default],
  363. provide: function provide() {
  364. return {
  365. rootMenu: this
  366. };
  367. },
  368. components: {
  369. 'el-menu-collapse-transition': {
  370. functional: true,
  371. render: function render(createElement, context) {
  372. var data = {
  373. props: {
  374. mode: 'out-in'
  375. },
  376. on: {
  377. beforeEnter: function beforeEnter(el) {
  378. el.style.opacity = 0.2;
  379. },
  380. enter: function enter(el) {
  381. (0, _dom.addClass)(el, 'el-opacity-transition');
  382. el.style.opacity = 1;
  383. },
  384. afterEnter: function afterEnter(el) {
  385. (0, _dom.removeClass)(el, 'el-opacity-transition');
  386. el.style.opacity = '';
  387. },
  388. beforeLeave: function beforeLeave(el) {
  389. if (!el.dataset) el.dataset = {};
  390. if ((0, _dom.hasClass)(el, 'el-menu--collapse')) {
  391. (0, _dom.removeClass)(el, 'el-menu--collapse');
  392. el.dataset.oldOverflow = el.style.overflow;
  393. el.dataset.scrollWidth = el.scrollWidth;
  394. (0, _dom.addClass)(el, 'el-menu--collapse');
  395. }
  396. el.style.width = el.scrollWidth + 'px';
  397. el.style.overflow = 'hidden';
  398. },
  399. leave: function leave(el) {
  400. if (!(0, _dom.hasClass)(el, 'el-menu--collapse')) {
  401. (0, _dom.addClass)(el, 'horizontal-collapse-transition');
  402. el.style.width = '64px';
  403. } else {
  404. (0, _dom.addClass)(el, 'horizontal-collapse-transition');
  405. el.style.width = el.dataset.scrollWidth + 'px';
  406. }
  407. },
  408. afterLeave: function afterLeave(el) {
  409. (0, _dom.removeClass)(el, 'horizontal-collapse-transition');
  410. if ((0, _dom.hasClass)(el, 'el-menu--collapse')) {
  411. el.style.width = el.dataset.scrollWidth + 'px';
  412. } else {
  413. el.style.width = '64px';
  414. }
  415. el.style.overflow = el.dataset.oldOverflow;
  416. }
  417. }
  418. };
  419. return createElement('transition', data, context.children);
  420. }
  421. }
  422. },
  423. props: {
  424. mode: {
  425. type: String,
  426. default: 'vertical'
  427. },
  428. defaultActive: {
  429. type: String,
  430. default: ''
  431. },
  432. defaultOpeneds: Array,
  433. uniqueOpened: Boolean,
  434. router: Boolean,
  435. menuTrigger: {
  436. type: String,
  437. default: 'hover'
  438. },
  439. collapse: Boolean,
  440. backgroundColor: String,
  441. textColor: String,
  442. activeTextColor: String
  443. },
  444. data: function data() {
  445. return {
  446. activeIndex: this.defaultActive,
  447. openedMenus: this.defaultOpeneds && !this.collapse ? this.defaultOpeneds.slice(0) : [],
  448. items: {},
  449. submenus: {}
  450. };
  451. },
  452. computed: {
  453. hoverBackground: function hoverBackground() {
  454. return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
  455. }
  456. },
  457. watch: {
  458. defaultActive: function defaultActive(value) {
  459. var item = this.items[value];
  460. if (item) {
  461. this.activeIndex = item.index;
  462. this.initOpenedMenu();
  463. } else {
  464. this.activeIndex = '';
  465. }
  466. },
  467. defaultOpeneds: function defaultOpeneds(value) {
  468. if (!this.collapse) {
  469. this.openedMenus = value;
  470. }
  471. },
  472. collapse: function collapse(value) {
  473. if (value) this.openedMenus = [];
  474. }
  475. },
  476. methods: {
  477. getMigratingConfig: function getMigratingConfig() {
  478. return {
  479. props: {
  480. 'theme': 'theme is removed.'
  481. }
  482. };
  483. },
  484. getColorChannels: function getColorChannels(color) {
  485. color = color.replace('#', '');
  486. if (/^[0-9a-fA-F]{3}$/.test(color)) {
  487. color = color.split('');
  488. for (var i = 2; i >= 0; i--) {
  489. color.splice(i, 0, color[i]);
  490. }
  491. color = color.join('');
  492. }
  493. if (/^[0-9a-fA-F]{6}$/.test(color)) {
  494. return {
  495. red: parseInt(color.slice(0, 2), 16),
  496. green: parseInt(color.slice(2, 4), 16),
  497. blue: parseInt(color.slice(4, 6), 16)
  498. };
  499. } else {
  500. return {
  501. red: 255,
  502. green: 255,
  503. blue: 255
  504. };
  505. }
  506. },
  507. mixColor: function mixColor(color, percent) {
  508. var _getColorChannels = this.getColorChannels(color),
  509. red = _getColorChannels.red,
  510. green = _getColorChannels.green,
  511. blue = _getColorChannels.blue;
  512. if (percent > 0) {
  513. // shade given color
  514. red *= 1 - percent;
  515. green *= 1 - percent;
  516. blue *= 1 - percent;
  517. } else {
  518. // tint given color
  519. red += (255 - red) * percent;
  520. green += (255 - green) * percent;
  521. blue += (255 - blue) * percent;
  522. }
  523. return 'rgb(' + Math.round(red) + ', ' + Math.round(green) + ', ' + Math.round(blue) + ')';
  524. },
  525. addItem: function addItem(item) {
  526. this.$set(this.items, item.index, item);
  527. },
  528. removeItem: function removeItem(item) {
  529. delete this.items[item.index];
  530. },
  531. addSubmenu: function addSubmenu(item) {
  532. this.$set(this.submenus, item.index, item);
  533. },
  534. removeSubmenu: function removeSubmenu(item) {
  535. delete this.submenus[item.index];
  536. },
  537. openMenu: function openMenu(index, indexPath) {
  538. var openedMenus = this.openedMenus;
  539. if (openedMenus.indexOf(index) !== -1) return;
  540. // 将不在该菜单路径下的其余菜单收起
  541. // collapse all menu that are not under current menu item
  542. if (this.uniqueOpened) {
  543. this.openedMenus = openedMenus.filter(function (index) {
  544. return indexPath.indexOf(index) !== -1;
  545. });
  546. }
  547. this.openedMenus.push(index);
  548. },
  549. closeMenu: function closeMenu(index) {
  550. var i = this.openedMenus.indexOf(index);
  551. if (i !== -1) {
  552. this.openedMenus.splice(i, 1);
  553. }
  554. },
  555. handleSubmenuClick: function handleSubmenuClick(submenu) {
  556. var index = submenu.index,
  557. indexPath = submenu.indexPath;
  558. var isOpened = this.openedMenus.indexOf(index) !== -1;
  559. if (isOpened) {
  560. this.closeMenu(index);
  561. this.$emit('close', index, indexPath);
  562. } else {
  563. this.openMenu(index, indexPath);
  564. this.$emit('open', index, indexPath);
  565. }
  566. },
  567. handleItemClick: function handleItemClick(item) {
  568. var index = item.index,
  569. indexPath = item.indexPath;
  570. this.activeIndex = item.index;
  571. this.$emit('select', index, indexPath, item);
  572. if (this.mode === 'horizontal' || this.collapse) {
  573. this.openedMenus = [];
  574. }
  575. if (this.router) {
  576. this.routeToItem(item);
  577. }
  578. },
  579. // 初始化展开菜单
  580. // initialize opened menu
  581. initOpenedMenu: function initOpenedMenu() {
  582. var _this = this;
  583. var index = this.activeIndex;
  584. var activeItem = this.items[index];
  585. if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
  586. var indexPath = activeItem.indexPath;
  587. // 展开该菜单项的路径上所有子菜单
  588. // expand all submenus of the menu item
  589. indexPath.forEach(function (index) {
  590. var submenu = _this.submenus[index];
  591. submenu && _this.openMenu(index, submenu.indexPath);
  592. });
  593. },
  594. routeToItem: function routeToItem(item) {
  595. var route = item.route || item.index;
  596. try {
  597. this.$router.push(route);
  598. } catch (e) {
  599. console.error(e);
  600. }
  601. },
  602. open: function open(index) {
  603. var _this2 = this;
  604. var indexPath = this.submenus[index.toString()].indexPath;
  605. indexPath.forEach(function (i) {
  606. return _this2.openMenu(i, indexPath);
  607. });
  608. },
  609. close: function close(index) {
  610. this.closeMenu(index);
  611. }
  612. },
  613. mounted: function mounted() {
  614. this.initOpenedMenu();
  615. this.$on('item-click', this.handleItemClick);
  616. this.$on('submenu-click', this.handleSubmenuClick);
  617. if (this.mode === 'horizontal') {
  618. new _ariaMenubar2.default(this.$el); // eslint-disable-line
  619. }
  620. }
  621. };
  622. /***/ }),
  623. /***/ 92:
  624. /***/ (function(module, exports, __webpack_require__) {
  625. "use strict";
  626. exports.__esModule = true;
  627. var _ariaMenuitem = __webpack_require__(93);
  628. var _ariaMenuitem2 = _interopRequireDefault(_ariaMenuitem);
  629. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  630. var Menu = function Menu(domNode) {
  631. this.domNode = domNode;
  632. this.init();
  633. };
  634. Menu.prototype.init = function () {
  635. var menuChildren = this.domNode.childNodes;
  636. [].filter.call(menuChildren, function (child) {
  637. return child.nodeType === 1;
  638. }).forEach(function (child) {
  639. new _ariaMenuitem2.default(child); // eslint-disable-line
  640. });
  641. };
  642. exports.default = Menu;
  643. /***/ }),
  644. /***/ 93:
  645. /***/ (function(module, exports, __webpack_require__) {
  646. "use strict";
  647. exports.__esModule = true;
  648. var _ariaUtils = __webpack_require__(46);
  649. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  650. var _ariaSubmenu = __webpack_require__(94);
  651. var _ariaSubmenu2 = _interopRequireDefault(_ariaSubmenu);
  652. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  653. var MenuItem = function MenuItem(domNode) {
  654. this.domNode = domNode;
  655. this.submenu = null;
  656. this.init();
  657. };
  658. MenuItem.prototype.init = function () {
  659. this.domNode.setAttribute('tabindex', '0');
  660. var menuChild = this.domNode.querySelector('.el-menu');
  661. if (menuChild) {
  662. this.submenu = new _ariaSubmenu2.default(this, menuChild);
  663. }
  664. this.addListeners();
  665. };
  666. MenuItem.prototype.addListeners = function () {
  667. var _this = this;
  668. var keys = _ariaUtils2.default.keys;
  669. this.domNode.addEventListener('keydown', function (event) {
  670. var prevDef = false;
  671. switch (event.keyCode) {
  672. case keys.down:
  673. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  674. _this.submenu.gotoSubIndex(0);
  675. prevDef = true;
  676. break;
  677. case keys.up:
  678. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseenter');
  679. _this.submenu.gotoSubIndex(_this.submenu.subMenuItems.length - 1);
  680. prevDef = true;
  681. break;
  682. case keys.tab:
  683. _ariaUtils2.default.triggerEvent(event.currentTarget, 'mouseleave');
  684. break;
  685. case keys.enter:
  686. case keys.space:
  687. prevDef = true;
  688. event.currentTarget.click();
  689. break;
  690. }
  691. if (prevDef) {
  692. event.preventDefault();
  693. }
  694. });
  695. };
  696. exports.default = MenuItem;
  697. /***/ }),
  698. /***/ 94:
  699. /***/ (function(module, exports, __webpack_require__) {
  700. "use strict";
  701. exports.__esModule = true;
  702. var _ariaUtils = __webpack_require__(46);
  703. var _ariaUtils2 = _interopRequireDefault(_ariaUtils);
  704. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  705. var SubMenu = function SubMenu(parent, domNode) {
  706. this.domNode = domNode;
  707. this.parent = parent;
  708. this.subMenuItems = [];
  709. this.subIndex = 0;
  710. this.init();
  711. };
  712. SubMenu.prototype.init = function () {
  713. this.subMenuItems = this.domNode.querySelectorAll('li');
  714. this.addListeners();
  715. };
  716. SubMenu.prototype.gotoSubIndex = function (idx) {
  717. if (idx === this.subMenuItems.length) {
  718. idx = 0;
  719. } else if (idx < 0) {
  720. idx = this.subMenuItems.length - 1;
  721. }
  722. this.subMenuItems[idx].focus();
  723. this.subIndex = idx;
  724. };
  725. SubMenu.prototype.addListeners = function () {
  726. var _this = this;
  727. var keys = _ariaUtils2.default.keys;
  728. var parentNode = this.parent.domNode;
  729. Array.prototype.forEach.call(this.subMenuItems, function (el) {
  730. el.addEventListener('keydown', function (event) {
  731. var prevDef = false;
  732. switch (event.keyCode) {
  733. case keys.down:
  734. _this.gotoSubIndex(_this.subIndex + 1);
  735. prevDef = true;
  736. break;
  737. case keys.up:
  738. _this.gotoSubIndex(_this.subIndex - 1);
  739. prevDef = true;
  740. break;
  741. case keys.tab:
  742. _ariaUtils2.default.triggerEvent(parentNode, 'mouseleave');
  743. break;
  744. case keys.enter:
  745. case keys.space:
  746. prevDef = true;
  747. event.currentTarget.click();
  748. break;
  749. }
  750. if (prevDef) {
  751. event.preventDefault();
  752. event.stopPropagation();
  753. }
  754. return false;
  755. });
  756. });
  757. };
  758. exports.default = SubMenu;
  759. /***/ }),
  760. /***/ 95:
  761. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  762. "use strict";
  763. var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-menu-collapse-transition',[_c('ul',{key:+_vm.collapse,staticClass:"el-menu",class:{
  764. 'el-menu--horizontal': _vm.mode === 'horizontal',
  765. 'el-menu--collapse': _vm.collapse
  766. },style:({ backgroundColor: _vm.backgroundColor || '' }),attrs:{"role":"menubar"}},[_vm._t("default")],2)])}
  767. var staticRenderFns = []
  768. var esExports = { render: render, staticRenderFns: staticRenderFns }
  769. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  770. /***/ })
  771. /******/ });