submenu.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  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 = 98);
  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. /***/ 100:
  168. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  169. "use strict";
  170. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  171. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_submenu_vue__ = __webpack_require__(101);
  172. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_submenu_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_submenu_vue__);
  173. var normalizeComponent = __webpack_require__(0)
  174. /* script */
  175. /* template */
  176. var __vue_template__ = null
  177. /* template functional */
  178. var __vue_template_functional__ = false
  179. /* styles */
  180. var __vue_styles__ = null
  181. /* scopeId */
  182. var __vue_scopeId__ = null
  183. /* moduleIdentifier (server only) */
  184. var __vue_module_identifier__ = null
  185. var Component = normalizeComponent(
  186. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_submenu_vue___default.a,
  187. __vue_template__,
  188. __vue_template_functional__,
  189. __vue_styles__,
  190. __vue_scopeId__,
  191. __vue_module_identifier__
  192. )
  193. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  194. /***/ }),
  195. /***/ 101:
  196. /***/ (function(module, exports, __webpack_require__) {
  197. "use strict";
  198. exports.__esModule = true;
  199. var _collapseTransition = __webpack_require__(21);
  200. var _collapseTransition2 = _interopRequireDefault(_collapseTransition);
  201. var _menuMixin = __webpack_require__(34);
  202. var _menuMixin2 = _interopRequireDefault(_menuMixin);
  203. var _emitter = __webpack_require__(1);
  204. var _emitter2 = _interopRequireDefault(_emitter);
  205. var _vuePopper = __webpack_require__(7);
  206. var _vuePopper2 = _interopRequireDefault(_vuePopper);
  207. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  208. var poperMixins = {
  209. props: {
  210. transformOrigin: {
  211. type: [Boolean, String],
  212. default: false
  213. },
  214. offset: _vuePopper2.default.props.offset,
  215. boundariesPadding: _vuePopper2.default.props.boundariesPadding,
  216. popperOptions: _vuePopper2.default.props.popperOptions
  217. },
  218. data: _vuePopper2.default.data,
  219. methods: _vuePopper2.default.methods,
  220. beforeDestroy: _vuePopper2.default.beforeDestroy,
  221. deactivated: _vuePopper2.default.deactivated
  222. };
  223. exports.default = {
  224. name: 'ElSubmenu',
  225. componentName: 'ElSubmenu',
  226. mixins: [_menuMixin2.default, _emitter2.default, poperMixins],
  227. components: { ElCollapseTransition: _collapseTransition2.default },
  228. props: {
  229. index: {
  230. type: String,
  231. required: true
  232. },
  233. showTimeout: {
  234. type: Number,
  235. default: 300
  236. },
  237. hideTimeout: {
  238. type: Number,
  239. default: 300
  240. },
  241. popperClass: String,
  242. disabled: Boolean,
  243. popperAppendToBody: {
  244. type: Boolean,
  245. default: undefined
  246. }
  247. },
  248. data: function data() {
  249. return {
  250. popperJS: null,
  251. timeout: null,
  252. items: {},
  253. submenus: {},
  254. mouseInChild: false
  255. };
  256. },
  257. watch: {
  258. opened: function opened(val) {
  259. var _this = this;
  260. if (this.isMenuPopup) {
  261. this.$nextTick(function (_) {
  262. _this.updatePopper();
  263. });
  264. }
  265. }
  266. },
  267. computed: {
  268. // popper option
  269. appendToBody: function appendToBody() {
  270. return this.popperAppendToBody === undefined ? this.isFirstLevel : this.popperAppendToBody;
  271. },
  272. menuTransitionName: function menuTransitionName() {
  273. return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
  274. },
  275. opened: function opened() {
  276. return this.rootMenu.openedMenus.indexOf(this.index) > -1;
  277. },
  278. active: function active() {
  279. var isActive = false;
  280. var submenus = this.submenus;
  281. var items = this.items;
  282. Object.keys(items).forEach(function (index) {
  283. if (items[index].active) {
  284. isActive = true;
  285. }
  286. });
  287. Object.keys(submenus).forEach(function (index) {
  288. if (submenus[index].active) {
  289. isActive = true;
  290. }
  291. });
  292. return isActive;
  293. },
  294. hoverBackground: function hoverBackground() {
  295. return this.rootMenu.hoverBackground;
  296. },
  297. backgroundColor: function backgroundColor() {
  298. return this.rootMenu.backgroundColor || '';
  299. },
  300. activeTextColor: function activeTextColor() {
  301. return this.rootMenu.activeTextColor || '';
  302. },
  303. textColor: function textColor() {
  304. return this.rootMenu.textColor || '';
  305. },
  306. mode: function mode() {
  307. return this.rootMenu.mode;
  308. },
  309. isMenuPopup: function isMenuPopup() {
  310. return this.rootMenu.isMenuPopup;
  311. },
  312. titleStyle: function titleStyle() {
  313. if (this.mode !== 'horizontal') {
  314. return {
  315. color: this.textColor
  316. };
  317. }
  318. return {
  319. borderBottomColor: this.active ? this.rootMenu.activeTextColor ? this.activeTextColor : '' : 'transparent',
  320. color: this.active ? this.activeTextColor : this.textColor
  321. };
  322. },
  323. isFirstLevel: function isFirstLevel() {
  324. var isFirstLevel = true;
  325. var parent = this.$parent;
  326. while (parent && parent !== this.rootMenu) {
  327. if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
  328. isFirstLevel = false;
  329. break;
  330. } else {
  331. parent = parent.$parent;
  332. }
  333. }
  334. return isFirstLevel;
  335. }
  336. },
  337. methods: {
  338. handleCollapseToggle: function handleCollapseToggle(value) {
  339. if (value) {
  340. this.initPopper();
  341. } else {
  342. this.doDestroy();
  343. }
  344. },
  345. addItem: function addItem(item) {
  346. this.$set(this.items, item.index, item);
  347. },
  348. removeItem: function removeItem(item) {
  349. delete this.items[item.index];
  350. },
  351. addSubmenu: function addSubmenu(item) {
  352. this.$set(this.submenus, item.index, item);
  353. },
  354. removeSubmenu: function removeSubmenu(item) {
  355. delete this.submenus[item.index];
  356. },
  357. handleClick: function handleClick() {
  358. var rootMenu = this.rootMenu,
  359. disabled = this.disabled;
  360. if (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal' || rootMenu.collapse && rootMenu.mode === 'vertical' || disabled) {
  361. return;
  362. }
  363. this.dispatch('ElMenu', 'submenu-click', this);
  364. },
  365. handleMouseenter: function handleMouseenter() {
  366. var _this2 = this;
  367. var rootMenu = this.rootMenu,
  368. disabled = this.disabled;
  369. if (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal' || !rootMenu.collapse && rootMenu.mode === 'vertical' || disabled) {
  370. return;
  371. }
  372. this.dispatch('ElSubmenu', 'mouse-enter-child');
  373. clearTimeout(this.timeout);
  374. this.timeout = setTimeout(function () {
  375. _this2.rootMenu.openMenu(_this2.index, _this2.indexPath);
  376. }, this.showTimeout);
  377. },
  378. handleMouseleave: function handleMouseleave() {
  379. var _this3 = this;
  380. var rootMenu = this.rootMenu;
  381. if (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal' || !rootMenu.collapse && rootMenu.mode === 'vertical') {
  382. return;
  383. }
  384. this.dispatch('ElSubmenu', 'mouse-leave-child');
  385. clearTimeout(this.timeout);
  386. this.timeout = setTimeout(function () {
  387. !_this3.mouseInChild && _this3.rootMenu.closeMenu(_this3.index);
  388. }, this.hideTimeout);
  389. },
  390. handleTitleMouseenter: function handleTitleMouseenter() {
  391. if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
  392. var title = this.$refs['submenu-title'];
  393. title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
  394. },
  395. handleTitleMouseleave: function handleTitleMouseleave() {
  396. if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
  397. var title = this.$refs['submenu-title'];
  398. title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
  399. },
  400. updatePlacement: function updatePlacement() {
  401. this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel ? 'bottom-start' : 'right-start';
  402. },
  403. initPopper: function initPopper() {
  404. this.referenceElm = this.$el;
  405. this.popperElm = this.$refs.menu;
  406. this.updatePlacement();
  407. }
  408. },
  409. created: function created() {
  410. var _this4 = this;
  411. this.parentMenu.addSubmenu(this);
  412. this.rootMenu.addSubmenu(this);
  413. this.$on('toggle-collapse', this.handleCollapseToggle);
  414. this.$on('mouse-enter-child', function () {
  415. _this4.mouseInChild = true;
  416. clearTimeout(_this4.timeout);
  417. });
  418. this.$on('mouse-leave-child', function () {
  419. _this4.mouseInChild = false;
  420. clearTimeout(_this4.timeout);
  421. });
  422. },
  423. mounted: function mounted() {
  424. this.initPopper();
  425. },
  426. beforeDestroy: function beforeDestroy() {
  427. this.parentMenu.removeSubmenu(this);
  428. this.rootMenu.removeSubmenu(this);
  429. },
  430. render: function render(h) {
  431. var active = this.active,
  432. opened = this.opened,
  433. paddingStyle = this.paddingStyle,
  434. titleStyle = this.titleStyle,
  435. backgroundColor = this.backgroundColor,
  436. rootMenu = this.rootMenu,
  437. currentPlacement = this.currentPlacement,
  438. menuTransitionName = this.menuTransitionName,
  439. mode = this.mode,
  440. disabled = this.disabled,
  441. popperClass = this.popperClass,
  442. $slots = this.$slots,
  443. isFirstLevel = this.isFirstLevel;
  444. var popupMenu = h(
  445. 'transition',
  446. {
  447. attrs: { name: menuTransitionName }
  448. },
  449. [h(
  450. 'div',
  451. {
  452. ref: 'menu',
  453. directives: [{
  454. name: 'show',
  455. value: opened
  456. }],
  457. 'class': ['el-menu--' + mode, popperClass],
  458. on: {
  459. 'mouseenter': this.handleMouseenter,
  460. 'mouseleave': this.handleMouseleave,
  461. 'focus': this.handleMouseenter
  462. }
  463. },
  464. [h(
  465. 'ul',
  466. {
  467. attrs: {
  468. role: 'menu'
  469. },
  470. 'class': ['el-menu el-menu--popup', 'el-menu--popup-' + currentPlacement],
  471. style: { backgroundColor: rootMenu.backgroundColor || '' } },
  472. [$slots.default]
  473. )]
  474. )]
  475. );
  476. var inlineMenu = h(
  477. 'el-collapse-transition',
  478. null,
  479. [h(
  480. 'ul',
  481. {
  482. attrs: {
  483. role: 'menu'
  484. },
  485. 'class': 'el-menu el-menu--inline',
  486. directives: [{
  487. name: 'show',
  488. value: opened
  489. }],
  490. style: { backgroundColor: rootMenu.backgroundColor || '' } },
  491. [$slots.default]
  492. )]
  493. );
  494. var submenuTitleIcon = rootMenu.mode === 'horizontal' && isFirstLevel || rootMenu.mode === 'vertical' && !rootMenu.collapse ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
  495. return h(
  496. 'li',
  497. {
  498. 'class': {
  499. 'el-submenu': true,
  500. 'is-active': active,
  501. 'is-opened': opened,
  502. 'is-disabled': disabled
  503. },
  504. attrs: { role: 'menuitem',
  505. 'aria-haspopup': 'true',
  506. 'aria-expanded': opened
  507. },
  508. on: {
  509. 'mouseenter': this.handleMouseenter,
  510. 'mouseleave': this.handleMouseleave,
  511. 'focus': this.handleMouseenter
  512. }
  513. },
  514. [h(
  515. 'div',
  516. {
  517. 'class': 'el-submenu__title',
  518. ref: 'submenu-title',
  519. on: {
  520. 'click': this.handleClick,
  521. 'mouseenter': this.handleTitleMouseenter,
  522. 'mouseleave': this.handleTitleMouseleave
  523. },
  524. style: [paddingStyle, titleStyle, { backgroundColor: backgroundColor }]
  525. },
  526. [$slots.title, h(
  527. 'i',
  528. { 'class': ['el-submenu__icon-arrow', submenuTitleIcon] },
  529. []
  530. )]
  531. ), this.isMenuPopup ? popupMenu : inlineMenu]
  532. );
  533. }
  534. };
  535. /***/ }),
  536. /***/ 21:
  537. /***/ (function(module, exports) {
  538. module.exports = require("element-ui/lib/transitions/collapse-transition");
  539. /***/ }),
  540. /***/ 34:
  541. /***/ (function(module, exports, __webpack_require__) {
  542. "use strict";
  543. exports.__esModule = true;
  544. exports.default = {
  545. inject: ['rootMenu'],
  546. computed: {
  547. indexPath: function indexPath() {
  548. var path = [this.index];
  549. var parent = this.$parent;
  550. while (parent.$options.componentName !== 'ElMenu') {
  551. if (parent.index) {
  552. path.unshift(parent.index);
  553. }
  554. parent = parent.$parent;
  555. }
  556. return path;
  557. },
  558. parentMenu: function parentMenu() {
  559. var parent = this.$parent;
  560. while (parent && ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1) {
  561. parent = parent.$parent;
  562. }
  563. return parent;
  564. },
  565. paddingStyle: function paddingStyle() {
  566. if (this.rootMenu.mode !== 'vertical') return {};
  567. var padding = 20;
  568. var parent = this.$parent;
  569. if (this.rootMenu.collapse) {
  570. padding = 20;
  571. } else {
  572. while (parent && parent.$options.componentName !== 'ElMenu') {
  573. if (parent.$options.componentName === 'ElSubmenu') {
  574. padding += 20;
  575. }
  576. parent = parent.$parent;
  577. }
  578. }
  579. return { paddingLeft: padding + 'px' };
  580. }
  581. }
  582. };
  583. /***/ }),
  584. /***/ 7:
  585. /***/ (function(module, exports) {
  586. module.exports = require("element-ui/lib/utils/vue-popper");
  587. /***/ }),
  588. /***/ 98:
  589. /***/ (function(module, exports, __webpack_require__) {
  590. module.exports = __webpack_require__(99);
  591. /***/ }),
  592. /***/ 99:
  593. /***/ (function(module, exports, __webpack_require__) {
  594. "use strict";
  595. exports.__esModule = true;
  596. var _submenu = __webpack_require__(100);
  597. var _submenu2 = _interopRequireDefault(_submenu);
  598. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  599. /* istanbul ignore next */
  600. _submenu2.default.install = function (Vue) {
  601. Vue.component(_submenu2.default.name, _submenu2.default);
  602. };
  603. exports.default = _submenu2.default;
  604. /***/ })
  605. /******/ });