cascader.js 39 KB

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