cascader.js 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299
  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 = 412);
  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. /***/ 10:
  168. /***/ (function(module, exports) {
  169. module.exports = require("element-ui/lib/utils/clickoutside");
  170. /***/ }),
  171. /***/ 12:
  172. /***/ (function(module, exports) {
  173. module.exports = require("throttle-debounce/debounce");
  174. /***/ }),
  175. /***/ 14:
  176. /***/ (function(module, exports) {
  177. module.exports = require("element-ui/lib/locale");
  178. /***/ }),
  179. /***/ 25:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/utils/scroll-into-view");
  182. /***/ }),
  183. /***/ 3:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/utils/util");
  186. /***/ }),
  187. /***/ 4:
  188. /***/ (function(module, exports) {
  189. module.exports = require("element-ui/lib/mixins/locale");
  190. /***/ }),
  191. /***/ 412:
  192. /***/ (function(module, exports, __webpack_require__) {
  193. module.exports = __webpack_require__(413);
  194. /***/ }),
  195. /***/ 413:
  196. /***/ (function(module, exports, __webpack_require__) {
  197. "use strict";
  198. exports.__esModule = true;
  199. var _main = __webpack_require__(414);
  200. var _main2 = _interopRequireDefault(_main);
  201. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  202. /* istanbul ignore next */
  203. _main2.default.install = function (Vue) {
  204. Vue.component(_main2.default.name, _main2.default);
  205. };
  206. exports.default = _main2.default;
  207. /***/ }),
  208. /***/ 414:
  209. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  210. "use strict";
  211. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  212. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(415);
  213. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__);
  214. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_6aff0320_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(419);
  215. var normalizeComponent = __webpack_require__(0)
  216. /* script */
  217. /* template */
  218. /* template functional */
  219. var __vue_template_functional__ = false
  220. /* styles */
  221. var __vue_styles__ = null
  222. /* scopeId */
  223. var __vue_scopeId__ = null
  224. /* moduleIdentifier (server only) */
  225. var __vue_module_identifier__ = null
  226. var Component = normalizeComponent(
  227. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
  228. __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_6aff0320_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
  229. __vue_template_functional__,
  230. __vue_styles__,
  231. __vue_scopeId__,
  232. __vue_module_identifier__
  233. )
  234. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  235. /***/ }),
  236. /***/ 415:
  237. /***/ (function(module, exports, __webpack_require__) {
  238. "use strict";
  239. exports.__esModule = true;
  240. var _vue = __webpack_require__(5);
  241. var _vue2 = _interopRequireDefault(_vue);
  242. var _menu = __webpack_require__(416);
  243. var _menu2 = _interopRequireDefault(_menu);
  244. var _input = __webpack_require__(6);
  245. var _input2 = _interopRequireDefault(_input);
  246. var _vuePopper = __webpack_require__(8);
  247. var _vuePopper2 = _interopRequireDefault(_vuePopper);
  248. var _clickoutside = __webpack_require__(10);
  249. var _clickoutside2 = _interopRequireDefault(_clickoutside);
  250. var _emitter = __webpack_require__(1);
  251. var _emitter2 = _interopRequireDefault(_emitter);
  252. var _locale = __webpack_require__(4);
  253. var _locale2 = _interopRequireDefault(_locale);
  254. var _locale3 = __webpack_require__(14);
  255. var _debounce = __webpack_require__(12);
  256. var _debounce2 = _interopRequireDefault(_debounce);
  257. var _util = __webpack_require__(3);
  258. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  259. //
  260. //
  261. //
  262. //
  263. //
  264. //
  265. //
  266. //
  267. //
  268. //
  269. //
  270. //
  271. //
  272. //
  273. //
  274. //
  275. //
  276. //
  277. //
  278. //
  279. //
  280. //
  281. //
  282. //
  283. //
  284. //
  285. //
  286. //
  287. //
  288. //
  289. //
  290. //
  291. //
  292. //
  293. //
  294. //
  295. //
  296. //
  297. //
  298. //
  299. //
  300. //
  301. //
  302. //
  303. //
  304. //
  305. //
  306. //
  307. //
  308. //
  309. //
  310. //
  311. //
  312. //
  313. //
  314. //
  315. //
  316. //
  317. var popperMixin = {
  318. props: {
  319. placement: {
  320. type: String,
  321. default: 'bottom-start'
  322. },
  323. appendToBody: _vuePopper2.default.props.appendToBody,
  324. offset: _vuePopper2.default.props.offset,
  325. boundariesPadding: _vuePopper2.default.props.boundariesPadding,
  326. popperOptions: _vuePopper2.default.props.popperOptions
  327. },
  328. methods: _vuePopper2.default.methods,
  329. data: _vuePopper2.default.data,
  330. beforeDestroy: _vuePopper2.default.beforeDestroy
  331. };
  332. exports.default = {
  333. name: 'ElCascader',
  334. directives: { Clickoutside: _clickoutside2.default },
  335. mixins: [popperMixin, _emitter2.default, _locale2.default],
  336. inject: {
  337. elFormItem: {
  338. default: ''
  339. }
  340. },
  341. components: {
  342. ElInput: _input2.default
  343. },
  344. props: {
  345. options: {
  346. type: Array,
  347. required: true
  348. },
  349. props: {
  350. type: Object,
  351. default: function _default() {
  352. return {
  353. children: 'children',
  354. label: 'label',
  355. value: 'value',
  356. disabled: 'disabled'
  357. };
  358. }
  359. },
  360. value: {
  361. type: Array,
  362. default: function _default() {
  363. return [];
  364. }
  365. },
  366. separator: {
  367. type: String,
  368. default: '/'
  369. },
  370. placeholder: {
  371. type: String,
  372. default: function _default() {
  373. return (0, _locale3.t)('el.cascader.placeholder');
  374. }
  375. },
  376. disabled: Boolean,
  377. clearable: {
  378. type: Boolean,
  379. default: false
  380. },
  381. changeOnSelect: Boolean,
  382. popperClass: String,
  383. expandTrigger: {
  384. type: String,
  385. default: 'click'
  386. },
  387. filterable: Boolean,
  388. size: String,
  389. showAllLevels: {
  390. type: Boolean,
  391. default: true
  392. },
  393. debounce: {
  394. type: Number,
  395. default: 300
  396. },
  397. beforeFilter: {
  398. type: Function,
  399. default: function _default() {
  400. return function () {};
  401. }
  402. },
  403. hoverThreshold: {
  404. type: Number,
  405. default: 500
  406. }
  407. },
  408. data: function data() {
  409. return {
  410. currentValue: this.value || [],
  411. menu: null,
  412. debouncedInputChange: function debouncedInputChange() {},
  413. menuVisible: false,
  414. inputHover: false,
  415. inputValue: '',
  416. flatOptions: null
  417. };
  418. },
  419. computed: {
  420. labelKey: function labelKey() {
  421. return this.props.label || 'label';
  422. },
  423. valueKey: function valueKey() {
  424. return this.props.value || 'value';
  425. },
  426. childrenKey: function childrenKey() {
  427. return this.props.children || 'children';
  428. },
  429. currentLabels: function currentLabels() {
  430. var _this = this;
  431. var options = this.options;
  432. var labels = [];
  433. this.currentValue.forEach(function (value) {
  434. var targetOption = options && options.filter(function (option) {
  435. return option[_this.valueKey] === value;
  436. })[0];
  437. if (targetOption) {
  438. labels.push(targetOption[_this.labelKey]);
  439. options = targetOption[_this.childrenKey];
  440. }
  441. });
  442. return labels;
  443. },
  444. _elFormItemSize: function _elFormItemSize() {
  445. return (this.elFormItem || {}).elFormItemSize;
  446. },
  447. cascaderSize: function cascaderSize() {
  448. return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  449. },
  450. id: function id() {
  451. return (0, _util.generateId)();
  452. }
  453. },
  454. watch: {
  455. menuVisible: function menuVisible(value) {
  456. this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
  457. value ? this.showMenu() : this.hideMenu();
  458. },
  459. value: function value(_value) {
  460. this.currentValue = _value;
  461. },
  462. currentValue: function currentValue(value) {
  463. this.dispatch('ElFormItem', 'el.form.change', [value]);
  464. },
  465. currentLabels: function currentLabels(value) {
  466. var inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1];
  467. this.$refs.input.$refs.input.setAttribute('value', inputLabel);
  468. },
  469. options: {
  470. deep: true,
  471. handler: function handler(value) {
  472. if (!this.menu) {
  473. this.initMenu();
  474. }
  475. this.flatOptions = this.flattenOptions(this.options);
  476. this.menu.options = value;
  477. }
  478. }
  479. },
  480. methods: {
  481. initMenu: function initMenu() {
  482. this.menu = new _vue2.default(_menu2.default).$mount();
  483. this.menu.options = this.options;
  484. this.menu.props = this.props;
  485. this.menu.expandTrigger = this.expandTrigger;
  486. this.menu.changeOnSelect = this.changeOnSelect;
  487. this.menu.popperClass = this.popperClass;
  488. this.menu.hoverThreshold = this.hoverThreshold;
  489. this.popperElm = this.menu.$el;
  490. this.menu.$refs.menus[0].setAttribute('id', 'cascader-menu-' + this.id);
  491. this.menu.$on('pick', this.handlePick);
  492. this.menu.$on('activeItemChange', this.handleActiveItemChange);
  493. this.menu.$on('menuLeave', this.doDestroy);
  494. this.menu.$on('closeInside', this.handleClickoutside);
  495. },
  496. showMenu: function showMenu() {
  497. var _this2 = this;
  498. if (!this.menu) {
  499. this.initMenu();
  500. }
  501. this.menu.value = this.currentValue.slice(0);
  502. this.menu.visible = true;
  503. this.menu.options = this.options;
  504. this.$nextTick(function (_) {
  505. _this2.updatePopper();
  506. _this2.menu.inputWidth = _this2.$refs.input.$el.offsetWidth - 2;
  507. });
  508. },
  509. hideMenu: function hideMenu() {
  510. this.inputValue = '';
  511. this.menu.visible = false;
  512. this.$refs.input.focus();
  513. },
  514. handleActiveItemChange: function handleActiveItemChange(value) {
  515. var _this3 = this;
  516. this.$nextTick(function (_) {
  517. _this3.updatePopper();
  518. });
  519. this.$emit('active-item-change', value);
  520. },
  521. handleKeydown: function handleKeydown(e) {
  522. var _this4 = this;
  523. var keyCode = e.keyCode;
  524. if (keyCode === 13) {
  525. this.handleClick();
  526. } else if (keyCode === 40) {
  527. // down
  528. this.menuVisible = true; // 打开
  529. setTimeout(function () {
  530. var firstMenu = _this4.popperElm.querySelectorAll('.el-cascader-menu')[0];
  531. firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
  532. });
  533. e.stopPropagation();
  534. e.preventDefault();
  535. } else if (keyCode === 27 || keyCode === 9) {
  536. // esc tab
  537. this.inputValue = '';
  538. if (this.menu) this.menu.visible = false;
  539. }
  540. },
  541. handlePick: function handlePick(value) {
  542. var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  543. this.currentValue = value;
  544. this.$emit('input', value);
  545. this.$emit('change', value);
  546. if (close) {
  547. this.menuVisible = false;
  548. } else {
  549. this.$nextTick(this.updatePopper);
  550. }
  551. },
  552. handleInputChange: function handleInputChange(value) {
  553. var _this5 = this;
  554. if (!this.menuVisible) return;
  555. var flatOptions = this.flatOptions;
  556. if (!value) {
  557. this.menu.options = this.options;
  558. this.$nextTick(this.updatePopper);
  559. return;
  560. }
  561. var filteredFlatOptions = flatOptions.filter(function (optionsStack) {
  562. return optionsStack.some(function (option) {
  563. return new RegExp(value, 'i').test(option[_this5.labelKey]);
  564. });
  565. });
  566. if (filteredFlatOptions.length > 0) {
  567. filteredFlatOptions = filteredFlatOptions.map(function (optionStack) {
  568. return {
  569. __IS__FLAT__OPTIONS: true,
  570. value: optionStack.map(function (item) {
  571. return item[_this5.valueKey];
  572. }),
  573. label: _this5.renderFilteredOptionLabel(value, optionStack)
  574. };
  575. });
  576. } else {
  577. filteredFlatOptions = [{
  578. __IS__FLAT__OPTIONS: true,
  579. label: this.t('el.cascader.noMatch'),
  580. value: '',
  581. disabled: true
  582. }];
  583. }
  584. this.menu.options = filteredFlatOptions;
  585. this.$nextTick(this.updatePopper);
  586. },
  587. renderFilteredOptionLabel: function renderFilteredOptionLabel(inputValue, optionsStack) {
  588. var _this6 = this;
  589. return optionsStack.map(function (option, index) {
  590. var label = option[_this6.labelKey];
  591. var keywordIndex = label.toLowerCase().indexOf(inputValue.toLowerCase());
  592. var labelPart = label.slice(keywordIndex, inputValue.length + keywordIndex);
  593. var node = keywordIndex > -1 ? _this6.highlightKeyword(label, labelPart) : label;
  594. return index === 0 ? node : [' / ', node];
  595. });
  596. },
  597. highlightKeyword: function highlightKeyword(label, keyword) {
  598. var _this7 = this;
  599. var h = this._c;
  600. return label.split(keyword).map(function (node, index) {
  601. return index === 0 ? node : [h('span', { class: { 'el-cascader-menu__item__keyword': true } }, [_this7._v(keyword)]), node];
  602. });
  603. },
  604. flattenOptions: function flattenOptions(options) {
  605. var _this8 = this;
  606. var ancestor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  607. var flatOptions = [];
  608. options.forEach(function (option) {
  609. var optionsStack = ancestor.concat(option);
  610. if (!option[_this8.childrenKey]) {
  611. flatOptions.push(optionsStack);
  612. } else {
  613. if (_this8.changeOnSelect) {
  614. flatOptions.push(optionsStack);
  615. }
  616. flatOptions = flatOptions.concat(_this8.flattenOptions(option[_this8.childrenKey], optionsStack));
  617. }
  618. });
  619. return flatOptions;
  620. },
  621. clearValue: function clearValue(ev) {
  622. ev.stopPropagation();
  623. this.handlePick([], true);
  624. },
  625. handleClickoutside: function handleClickoutside() {
  626. this.menuVisible = false;
  627. },
  628. handleClick: function handleClick() {
  629. if (this.disabled) return;
  630. this.$refs.input.focus();
  631. if (this.filterable) {
  632. this.menuVisible = true;
  633. return;
  634. }
  635. this.menuVisible = !this.menuVisible;
  636. }
  637. },
  638. created: function created() {
  639. var _this9 = this;
  640. this.debouncedInputChange = (0, _debounce2.default)(this.debounce, function (value) {
  641. var before = _this9.beforeFilter(value);
  642. if (before && before.then) {
  643. _this9.menu.options = [{
  644. __IS__FLAT__OPTIONS: true,
  645. label: _this9.t('el.cascader.loading'),
  646. value: '',
  647. disabled: true
  648. }];
  649. before.then(function () {
  650. _this9.$nextTick(function () {
  651. _this9.handleInputChange(value);
  652. });
  653. });
  654. } else if (before !== false) {
  655. _this9.$nextTick(function () {
  656. _this9.handleInputChange(value);
  657. });
  658. }
  659. });
  660. },
  661. mounted: function mounted() {
  662. this.flatOptions = this.flattenOptions(this.options);
  663. }
  664. };
  665. /***/ }),
  666. /***/ 416:
  667. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  668. "use strict";
  669. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  670. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue__ = __webpack_require__(417);
  671. /* 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__);
  672. var normalizeComponent = __webpack_require__(0)
  673. /* script */
  674. /* template */
  675. var __vue_template__ = null
  676. /* template functional */
  677. var __vue_template_functional__ = false
  678. /* styles */
  679. var __vue_styles__ = null
  680. /* scopeId */
  681. var __vue_scopeId__ = null
  682. /* moduleIdentifier (server only) */
  683. var __vue_module_identifier__ = null
  684. var Component = normalizeComponent(
  685. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_menu_vue___default.a,
  686. __vue_template__,
  687. __vue_template_functional__,
  688. __vue_styles__,
  689. __vue_scopeId__,
  690. __vue_module_identifier__
  691. )
  692. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  693. /***/ }),
  694. /***/ 417:
  695. /***/ (function(module, exports, __webpack_require__) {
  696. "use strict";
  697. exports.__esModule = true;
  698. var _babelHelperVueJsxMergeProps = __webpack_require__(44);
  699. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  700. var _shared = __webpack_require__(418);
  701. var _scrollIntoView = __webpack_require__(25);
  702. var _scrollIntoView2 = _interopRequireDefault(_scrollIntoView);
  703. var _util = __webpack_require__(3);
  704. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  705. var copyArray = function copyArray(arr, props) {
  706. if (!arr || !Array.isArray(arr) || !props) return arr;
  707. var result = [];
  708. var configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
  709. var childrenProp = props.children || 'children';
  710. arr.forEach(function (item) {
  711. var itemCopy = {};
  712. configurableProps.forEach(function (prop) {
  713. var name = props[prop];
  714. var value = item[name];
  715. if (value === undefined) {
  716. name = prop;
  717. value = item[name];
  718. }
  719. if (value !== undefined) itemCopy[name] = value;
  720. });
  721. if (Array.isArray(item[childrenProp])) {
  722. itemCopy[childrenProp] = copyArray(item[childrenProp], props);
  723. }
  724. result.push(itemCopy);
  725. });
  726. return result;
  727. };
  728. exports.default = {
  729. name: 'ElCascaderMenu',
  730. data: function data() {
  731. return {
  732. inputWidth: 0,
  733. options: [],
  734. props: {},
  735. visible: false,
  736. activeValue: [],
  737. value: [],
  738. expandTrigger: 'click',
  739. changeOnSelect: false,
  740. popperClass: '',
  741. hoverTimer: 0,
  742. clicking: false
  743. };
  744. },
  745. watch: {
  746. visible: function visible(value) {
  747. if (value) {
  748. this.activeValue = this.value;
  749. }
  750. },
  751. value: {
  752. immediate: true,
  753. handler: function handler(value) {
  754. this.activeValue = value;
  755. }
  756. }
  757. },
  758. computed: {
  759. activeOptions: {
  760. cache: false,
  761. get: function get() {
  762. var _this = this;
  763. var activeValue = this.activeValue;
  764. var configurableProps = ['label', 'value', 'children', 'disabled'];
  765. var formatOptions = function formatOptions(options) {
  766. options.forEach(function (option) {
  767. if (option.__IS__FLAT__OPTIONS) return;
  768. configurableProps.forEach(function (prop) {
  769. var value = option[_this.props[prop] || prop];
  770. if (value !== undefined) option[prop] = value;
  771. });
  772. if (Array.isArray(option.children)) {
  773. formatOptions(option.children);
  774. }
  775. });
  776. };
  777. var loadActiveOptions = function loadActiveOptions(options) {
  778. var activeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  779. var level = activeOptions.length;
  780. activeOptions[level] = options;
  781. var active = activeValue[level];
  782. if ((0, _shared.isDef)(active)) {
  783. options = options.filter(function (option) {
  784. return option.value === active;
  785. })[0];
  786. if (options && options.children) {
  787. loadActiveOptions(options.children, activeOptions);
  788. }
  789. }
  790. return activeOptions;
  791. };
  792. var optionsCopy = copyArray(this.options, this.props);
  793. formatOptions(optionsCopy);
  794. return loadActiveOptions(optionsCopy);
  795. }
  796. },
  797. id: function id() {
  798. return (0, _util.generateId)();
  799. }
  800. },
  801. methods: {
  802. select: function select(item, menuIndex) {
  803. if (item.__IS__FLAT__OPTIONS) {
  804. this.activeValue = item.value;
  805. } else if (menuIndex) {
  806. this.activeValue.splice(menuIndex, this.activeValue.length - 1, item.value);
  807. } else {
  808. this.activeValue = [item.value];
  809. }
  810. this.$emit('pick', this.activeValue.slice());
  811. },
  812. handleMenuLeave: function handleMenuLeave() {
  813. this.$emit('menuLeave');
  814. },
  815. activeItem: function activeItem(item, menuIndex) {
  816. var len = this.activeOptions.length;
  817. this.activeValue.splice(menuIndex, len, item.value);
  818. this.activeOptions.splice(menuIndex + 1, len, item.children);
  819. if (this.changeOnSelect) {
  820. this.$emit('pick', this.activeValue.slice(), false);
  821. } else {
  822. this.$emit('activeItemChange', this.activeValue);
  823. }
  824. },
  825. scrollMenu: function scrollMenu(menu) {
  826. (0, _scrollIntoView2.default)(menu, menu.getElementsByClassName('is-active')[0]);
  827. },
  828. handleMenuEnter: function handleMenuEnter() {
  829. var _this2 = this;
  830. this.$nextTick(function () {
  831. return _this2.$refs.menus.forEach(function (menu) {
  832. return _this2.scrollMenu(menu);
  833. });
  834. });
  835. }
  836. },
  837. render: function render(h) {
  838. var _this3 = this;
  839. var activeValue = this.activeValue,
  840. activeOptions = this.activeOptions,
  841. visible = this.visible,
  842. expandTrigger = this.expandTrigger,
  843. popperClass = this.popperClass,
  844. hoverThreshold = this.hoverThreshold;
  845. var itemId = null;
  846. var itemIndex = 0;
  847. var hoverMenuRefs = {};
  848. var hoverMenuHandler = function hoverMenuHandler(e) {
  849. var activeMenu = hoverMenuRefs.activeMenu;
  850. if (!activeMenu) return;
  851. var offsetX = e.offsetX;
  852. var width = activeMenu.offsetWidth;
  853. var height = activeMenu.offsetHeight;
  854. if (e.target === hoverMenuRefs.activeItem) {
  855. clearTimeout(_this3.hoverTimer);
  856. var _hoverMenuRefs = hoverMenuRefs,
  857. activeItem = _hoverMenuRefs.activeItem;
  858. var offsetY_top = activeItem.offsetTop;
  859. var offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
  860. hoverMenuRefs.hoverZone.innerHTML = '\n <path style="pointer-events: auto;" fill="transparent" d="M' + offsetX + ' ' + offsetY_top + ' L' + width + ' 0 V' + offsetY_top + ' Z" />\n <path style="pointer-events: auto;" fill="transparent" d="M' + offsetX + ' ' + offsetY_Bottom + ' L' + width + ' ' + height + ' V' + offsetY_Bottom + ' Z" />\n ';
  861. } else {
  862. if (!_this3.hoverTimer) {
  863. _this3.hoverTimer = setTimeout(function () {
  864. hoverMenuRefs.hoverZone.innerHTML = '';
  865. }, hoverThreshold);
  866. }
  867. }
  868. };
  869. var menus = this._l(activeOptions, function (menu, menuIndex) {
  870. var isFlat = false;
  871. var menuId = 'menu-' + _this3.id + '-' + menuIndex;
  872. var ownsId = 'menu-' + _this3.id + '-' + (menuIndex + 1);
  873. var items = _this3._l(menu, function (item) {
  874. var events = {
  875. on: {}
  876. };
  877. if (item.__IS__FLAT__OPTIONS) isFlat = true;
  878. if (!item.disabled) {
  879. // keydown up/down/left/right/enter
  880. events.on.keydown = function (ev) {
  881. var keyCode = ev.keyCode;
  882. if ([37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) < 0) {
  883. return;
  884. }
  885. var currentEle = ev.target;
  886. var parentEle = _this3.$refs.menus[menuIndex];
  887. var menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
  888. var currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
  889. var nextIndex = void 0,
  890. nextMenu = void 0;
  891. if ([38, 40].indexOf(keyCode) > -1) {
  892. if (keyCode === 38) {
  893. // up键
  894. nextIndex = currentIndex !== 0 ? currentIndex - 1 : currentIndex;
  895. } else if (keyCode === 40) {
  896. // down
  897. nextIndex = currentIndex !== menuItemList.length - 1 ? currentIndex + 1 : currentIndex;
  898. }
  899. menuItemList[nextIndex].focus();
  900. } else if (keyCode === 37) {
  901. // left键
  902. if (menuIndex !== 0) {
  903. var previousMenu = _this3.$refs.menus[menuIndex - 1];
  904. previousMenu.querySelector('[aria-expanded=true]').focus();
  905. }
  906. } else if (keyCode === 39) {
  907. // right
  908. if (item.children) {
  909. // 有子menu 选择子menu的第一个menuitem
  910. nextMenu = _this3.$refs.menus[menuIndex + 1];
  911. nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
  912. }
  913. } else if (keyCode === 13) {
  914. if (!item.children) {
  915. var id = currentEle.getAttribute('id');
  916. parentEle.setAttribute('aria-activedescendant', id);
  917. _this3.select(item, menuIndex);
  918. _this3.$nextTick(function () {
  919. return _this3.scrollMenu(_this3.$refs.menus[menuIndex]);
  920. });
  921. }
  922. } else if (keyCode === 9 || keyCode === 27) {
  923. // esc tab
  924. _this3.$emit('closeInside');
  925. }
  926. };
  927. if (item.children) {
  928. (function () {
  929. var triggerEvent = {
  930. click: 'click',
  931. hover: 'mouseenter'
  932. }[expandTrigger];
  933. var triggerHandler = function triggerHandler() {
  934. _this3.activeItem(item, menuIndex);
  935. _this3.$nextTick(function () {
  936. // adjust self and next level
  937. _this3.scrollMenu(_this3.$refs.menus[menuIndex]);
  938. _this3.scrollMenu(_this3.$refs.menus[menuIndex + 1]);
  939. });
  940. };
  941. events.on[triggerEvent] = triggerHandler;
  942. events.on['mousedown'] = function () {
  943. _this3.clicking = true;
  944. };
  945. events.on['focus'] = function () {
  946. // focus 选中
  947. if (_this3.clicking) {
  948. _this3.clicking = false;
  949. return;
  950. }
  951. triggerHandler();
  952. };
  953. })();
  954. } else {
  955. events.on.click = function () {
  956. _this3.select(item, menuIndex);
  957. _this3.$nextTick(function () {
  958. return _this3.scrollMenu(_this3.$refs.menus[menuIndex]);
  959. });
  960. };
  961. }
  962. }
  963. if (!item.disabled && !item.children) {
  964. // no children set id
  965. itemId = menuId + '-' + itemIndex;
  966. itemIndex++;
  967. }
  968. return h(
  969. 'li',
  970. (0, _babelHelperVueJsxMergeProps2.default)([{
  971. 'class': {
  972. 'el-cascader-menu__item': true,
  973. 'el-cascader-menu__item--extensible': item.children,
  974. 'is-active': item.value === activeValue[menuIndex],
  975. 'is-disabled': item.disabled
  976. },
  977. ref: item.value === activeValue[menuIndex] ? 'activeItem' : null
  978. }, events, {
  979. attrs: {
  980. tabindex: item.disabled ? null : -1,
  981. role: 'menuitem',
  982. 'aria-haspopup': !!item.children,
  983. 'aria-expanded': item.value === activeValue[menuIndex],
  984. id: itemId,
  985. 'aria-owns': !item.children ? null : ownsId
  986. }
  987. }]),
  988. [item.label]
  989. );
  990. });
  991. var menuStyle = {};
  992. if (isFlat) {
  993. menuStyle.minWidth = _this3.inputWidth + 'px';
  994. }
  995. var isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
  996. var hoverMenuEvent = {
  997. on: {}
  998. };
  999. if (isHoveredMenu) {
  1000. hoverMenuEvent.on.mousemove = hoverMenuHandler;
  1001. menuStyle.position = 'relative';
  1002. }
  1003. return h(
  1004. 'ul',
  1005. (0, _babelHelperVueJsxMergeProps2.default)([{
  1006. 'class': {
  1007. 'el-cascader-menu': true,
  1008. 'el-cascader-menu--flexible': isFlat
  1009. }
  1010. }, hoverMenuEvent, {
  1011. style: menuStyle,
  1012. refInFor: true,
  1013. ref: 'menus',
  1014. attrs: { role: 'menu',
  1015. id: menuId
  1016. }
  1017. }]),
  1018. [items, isHoveredMenu ? h(
  1019. 'svg',
  1020. {
  1021. ref: 'hoverZone',
  1022. style: {
  1023. position: 'absolute',
  1024. top: 0,
  1025. height: '100%',
  1026. width: '100%',
  1027. left: 0,
  1028. pointerEvents: 'none'
  1029. }
  1030. },
  1031. []
  1032. ) : null]
  1033. );
  1034. });
  1035. if (expandTrigger === 'hover') {
  1036. this.$nextTick(function () {
  1037. var activeItem = _this3.$refs.activeItem;
  1038. if (activeItem) {
  1039. var activeMenu = activeItem.parentElement;
  1040. var hoverZone = _this3.$refs.hoverZone;
  1041. hoverMenuRefs = {
  1042. activeMenu: activeMenu,
  1043. activeItem: activeItem,
  1044. hoverZone: hoverZone
  1045. };
  1046. } else {
  1047. hoverMenuRefs = {};
  1048. }
  1049. });
  1050. }
  1051. return h(
  1052. 'transition',
  1053. {
  1054. attrs: { name: 'el-zoom-in-top' },
  1055. on: {
  1056. 'before-enter': this.handleMenuEnter,
  1057. 'after-leave': this.handleMenuLeave
  1058. }
  1059. },
  1060. [h(
  1061. 'div',
  1062. {
  1063. directives: [{
  1064. name: 'show',
  1065. value: visible
  1066. }],
  1067. 'class': ['el-cascader-menus el-popper', popperClass],
  1068. ref: 'wrapper'
  1069. },
  1070. [h(
  1071. 'div',
  1072. {
  1073. attrs: { 'x-arrow': true },
  1074. 'class': 'popper__arrow' },
  1075. []
  1076. ), menus]
  1077. )]
  1078. );
  1079. }
  1080. };
  1081. /***/ }),
  1082. /***/ 418:
  1083. /***/ (function(module, exports) {
  1084. module.exports = require("element-ui/lib/utils/shared");
  1085. /***/ }),
  1086. /***/ 419:
  1087. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1088. "use strict";
  1089. var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.handleClickoutside),expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[
  1090. {
  1091. 'is-opened': _vm.menuVisible,
  1092. 'is-disabled': _vm.disabled
  1093. },
  1094. _vm.cascaderSize ? 'el-cascader--' + _vm.cascaderSize : ''
  1095. ],on:{"click":_vm.handleClick,"mouseenter":function($event){_vm.inputHover = true},"focus":function($event){_vm.inputHover = true},"mouseleave":function($event){_vm.inputHover = false},"blur":function($event){_vm.inputHover = false},"keydown":_vm.handleKeydown}},[_c('el-input',{ref:"input",attrs:{"readonly":!_vm.filterable,"placeholder":_vm.currentLabels.length ? undefined : _vm.placeholder,"validate-event":false,"size":_vm.size,"disabled":_vm.disabled},on:{"input":_vm.debouncedInputChange},model:{value:(_vm.inputValue),callback:function ($$v) {_vm.inputValue=$$v},expression:"inputValue"}},[_c('template',{attrs:{"slot":"suffix"},slot:"suffix"},[(_vm.clearable && _vm.inputHover && _vm.currentLabels.length)?_c('i',{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{"click":_vm.clearValue}}):_c('i',{key:"2",staticClass:"el-input__icon el-icon-arrow-down",class:{ 'is-reverse': _vm.menuVisible }})])],2),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.inputValue === ''),expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[(_vm.showAllLevels)?[_vm._l((_vm.currentLabels),function(label,index){return [_vm._v("\n "+_vm._s(label)+"\n "),(index < _vm.currentLabels.length - 1)?_c('span',[_vm._v(" "+_vm._s(_vm.separator)+" ")]):_vm._e()]})]:[_vm._v("\n "+_vm._s(_vm.currentLabels[_vm.currentLabels.length - 1])+"\n ")]],2)],1)}
  1096. var staticRenderFns = []
  1097. var esExports = { render: render, staticRenderFns: staticRenderFns }
  1098. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  1099. /***/ }),
  1100. /***/ 44:
  1101. /***/ (function(module, exports) {
  1102. module.exports = require("babel-helper-vue-jsx-merge-props");
  1103. /***/ }),
  1104. /***/ 5:
  1105. /***/ (function(module, exports) {
  1106. module.exports = require("vue");
  1107. /***/ }),
  1108. /***/ 6:
  1109. /***/ (function(module, exports) {
  1110. module.exports = require("element-ui/lib/input");
  1111. /***/ }),
  1112. /***/ 8:
  1113. /***/ (function(module, exports) {
  1114. module.exports = require("element-ui/lib/utils/vue-popper");
  1115. /***/ })
  1116. /******/ });