autocomplete.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/ // The require function
  6. /******/ function __webpack_require__(moduleId) {
  7. /******/ // Check if module is in cache
  8. /******/ if(installedModules[moduleId])
  9. /******/ return installedModules[moduleId].exports;
  10. /******/ // Create a new module (and put it into the cache)
  11. /******/ var module = installedModules[moduleId] = {
  12. /******/ exports: {},
  13. /******/ id: moduleId,
  14. /******/ loaded: false
  15. /******/ };
  16. /******/ // Execute the module function
  17. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  18. /******/ // Flag the module as loaded
  19. /******/ module.loaded = true;
  20. /******/ // Return the exports of the module
  21. /******/ return module.exports;
  22. /******/ }
  23. /******/ // expose the modules object (__webpack_modules__)
  24. /******/ __webpack_require__.m = modules;
  25. /******/ // expose the module cache
  26. /******/ __webpack_require__.c = installedModules;
  27. /******/ // __webpack_public_path__
  28. /******/ __webpack_require__.p = "/dist/";
  29. /******/ // Load entry module and return exports
  30. /******/ return __webpack_require__(0);
  31. /******/ })
  32. /************************************************************************/
  33. /******/ ([
  34. /* 0 */
  35. /***/ function(module, exports, __webpack_require__) {
  36. module.exports = __webpack_require__(6);
  37. /***/ },
  38. /* 1 */,
  39. /* 2 */,
  40. /* 3 */
  41. /***/ function(module, exports) {
  42. module.exports = function normalizeComponent (
  43. rawScriptExports,
  44. compiledTemplate,
  45. scopeId,
  46. cssModules
  47. ) {
  48. var esModule
  49. var scriptExports = rawScriptExports = rawScriptExports || {}
  50. // ES6 modules interop
  51. var type = typeof rawScriptExports.default
  52. if (type === 'object' || type === 'function') {
  53. esModule = rawScriptExports
  54. scriptExports = rawScriptExports.default
  55. }
  56. // Vue.extend constructor export interop
  57. var options = typeof scriptExports === 'function'
  58. ? scriptExports.options
  59. : scriptExports
  60. // render functions
  61. if (compiledTemplate) {
  62. options.render = compiledTemplate.render
  63. options.staticRenderFns = compiledTemplate.staticRenderFns
  64. }
  65. // scopedId
  66. if (scopeId) {
  67. options._scopeId = scopeId
  68. }
  69. // inject cssModules
  70. if (cssModules) {
  71. var computed = options.computed || (options.computed = {})
  72. Object.keys(cssModules).forEach(function (key) {
  73. var module = cssModules[key]
  74. computed[key] = function () { return module }
  75. })
  76. }
  77. return {
  78. esModule: esModule,
  79. exports: scriptExports,
  80. options: options
  81. }
  82. }
  83. /***/ },
  84. /* 4 */,
  85. /* 5 */,
  86. /* 6 */
  87. /***/ function(module, exports, __webpack_require__) {
  88. 'use strict';
  89. exports.__esModule = true;
  90. var _autocomplete = __webpack_require__(7);
  91. var _autocomplete2 = _interopRequireDefault(_autocomplete);
  92. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  93. /* istanbul ignore next */
  94. _autocomplete2.default.install = function (Vue) {
  95. Vue.component(_autocomplete2.default.name, _autocomplete2.default);
  96. };
  97. exports.default = _autocomplete2.default;
  98. /***/ },
  99. /* 7 */
  100. /***/ function(module, exports, __webpack_require__) {
  101. var Component = __webpack_require__(3)(
  102. /* script */
  103. __webpack_require__(8),
  104. /* template */
  105. __webpack_require__(17),
  106. /* scopeId */
  107. null,
  108. /* cssModules */
  109. null
  110. )
  111. module.exports = Component.exports
  112. /***/ },
  113. /* 8 */
  114. /***/ function(module, exports, __webpack_require__) {
  115. 'use strict';
  116. exports.__esModule = true;
  117. var _input = __webpack_require__(9);
  118. var _input2 = _interopRequireDefault(_input);
  119. var _clickoutside = __webpack_require__(10);
  120. var _clickoutside2 = _interopRequireDefault(_clickoutside);
  121. var _autocompleteSuggestions = __webpack_require__(11);
  122. var _autocompleteSuggestions2 = _interopRequireDefault(_autocompleteSuggestions);
  123. var _emitter = __webpack_require__(14);
  124. var _emitter2 = _interopRequireDefault(_emitter);
  125. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  126. //
  127. //
  128. //
  129. //
  130. //
  131. //
  132. //
  133. //
  134. //
  135. //
  136. //
  137. //
  138. //
  139. //
  140. //
  141. //
  142. //
  143. //
  144. //
  145. //
  146. //
  147. //
  148. //
  149. //
  150. //
  151. //
  152. //
  153. //
  154. //
  155. //
  156. //
  157. //
  158. //
  159. exports.default = {
  160. name: 'ElAutocomplete',
  161. mixins: [_emitter2.default],
  162. componentName: 'ElAutocomplete',
  163. components: {
  164. ElInput: _input2.default,
  165. ElAutocompleteSuggestions: _autocompleteSuggestions2.default
  166. },
  167. directives: { Clickoutside: _clickoutside2.default },
  168. props: {
  169. popperClass: String,
  170. placeholder: String,
  171. disabled: Boolean,
  172. name: String,
  173. size: String,
  174. value: String,
  175. autofocus: Boolean,
  176. fetchSuggestions: Function,
  177. triggerOnFocus: {
  178. type: Boolean,
  179. default: true
  180. },
  181. customItem: String,
  182. icon: String,
  183. onIconClick: Function
  184. },
  185. data: function data() {
  186. return {
  187. isFocus: false,
  188. suggestions: [],
  189. loading: false,
  190. highlightedIndex: -1
  191. };
  192. },
  193. computed: {
  194. suggestionVisible: function suggestionVisible() {
  195. var suggestions = this.suggestions;
  196. var isValidData = Array.isArray(suggestions) && suggestions.length > 0;
  197. return (isValidData || this.loading) && this.isFocus;
  198. }
  199. },
  200. watch: {
  201. suggestionVisible: function suggestionVisible(val) {
  202. this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
  203. }
  204. },
  205. methods: {
  206. getData: function getData(queryString) {
  207. var _this = this;
  208. this.loading = true;
  209. this.fetchSuggestions(queryString, function (suggestions) {
  210. _this.loading = false;
  211. if (Array.isArray(suggestions)) {
  212. _this.suggestions = suggestions;
  213. } else {
  214. console.error('autocomplete suggestions must be an array');
  215. }
  216. });
  217. },
  218. handleChange: function handleChange(value) {
  219. this.$emit('input', value);
  220. if (!this.triggerOnFocus && !value) {
  221. this.suggestions = [];
  222. return;
  223. }
  224. this.getData(value);
  225. },
  226. handleFocus: function handleFocus() {
  227. this.isFocus = true;
  228. if (this.triggerOnFocus) {
  229. this.getData(this.value);
  230. }
  231. },
  232. handleBlur: function handleBlur() {
  233. var _this2 = this;
  234. // 因为 blur 事件处理优先于 select 事件执行
  235. setTimeout(function (_) {
  236. _this2.isFocus = false;
  237. }, 100);
  238. },
  239. handleKeyEnter: function handleKeyEnter() {
  240. if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
  241. this.select(this.suggestions[this.highlightedIndex]);
  242. }
  243. },
  244. handleClickoutside: function handleClickoutside() {
  245. this.isFocus = false;
  246. },
  247. select: function select(item) {
  248. var _this3 = this;
  249. this.$emit('input', item.value);
  250. this.$emit('select', item);
  251. this.$nextTick(function (_) {
  252. _this3.suggestions = [];
  253. });
  254. },
  255. highlight: function highlight(index) {
  256. if (!this.suggestionVisible || this.loading) {
  257. return;
  258. }
  259. if (index < 0) index = 0;
  260. if (index >= this.suggestions.length) {
  261. index = this.suggestions.length - 1;
  262. }
  263. var suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
  264. var suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');
  265. var highlightItem = suggestionList[index];
  266. var scrollTop = suggestion.scrollTop;
  267. var offsetTop = highlightItem.offsetTop;
  268. if (offsetTop + highlightItem.scrollHeight > scrollTop + suggestion.clientHeight) {
  269. suggestion.scrollTop += highlightItem.scrollHeight;
  270. }
  271. if (offsetTop < scrollTop) {
  272. suggestion.scrollTop -= highlightItem.scrollHeight;
  273. }
  274. this.highlightedIndex = index;
  275. }
  276. },
  277. mounted: function mounted() {
  278. var _this4 = this;
  279. this.$on('item-click', function (item) {
  280. _this4.select(item);
  281. });
  282. },
  283. beforeDestroy: function beforeDestroy() {
  284. this.$refs.suggestions.$destroy();
  285. }
  286. };
  287. /***/ },
  288. /* 9 */
  289. /***/ function(module, exports) {
  290. module.exports = require("element-ui/lib/input");
  291. /***/ },
  292. /* 10 */
  293. /***/ function(module, exports) {
  294. module.exports = require("element-ui/lib/utils/clickoutside");
  295. /***/ },
  296. /* 11 */
  297. /***/ function(module, exports, __webpack_require__) {
  298. var Component = __webpack_require__(3)(
  299. /* script */
  300. __webpack_require__(12),
  301. /* template */
  302. __webpack_require__(16),
  303. /* scopeId */
  304. null,
  305. /* cssModules */
  306. null
  307. )
  308. module.exports = Component.exports
  309. /***/ },
  310. /* 12 */
  311. /***/ function(module, exports, __webpack_require__) {
  312. 'use strict';
  313. exports.__esModule = true;
  314. var _vuePopper = __webpack_require__(13);
  315. var _vuePopper2 = _interopRequireDefault(_vuePopper);
  316. var _emitter = __webpack_require__(14);
  317. var _emitter2 = _interopRequireDefault(_emitter);
  318. var _scrollbar = __webpack_require__(15);
  319. var _scrollbar2 = _interopRequireDefault(_scrollbar);
  320. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  321. exports.default = {
  322. components: { ElScrollbar: _scrollbar2.default },
  323. mixins: [_vuePopper2.default, _emitter2.default],
  324. componentName: 'ElAutocompleteSuggestions',
  325. data: function data() {
  326. return {
  327. parent: this.$parent,
  328. dropdownWidth: ''
  329. };
  330. },
  331. props: {
  332. suggestions: Array,
  333. options: {
  334. default: function _default() {
  335. return {
  336. forceAbsolute: true,
  337. gpuAcceleration: false
  338. };
  339. }
  340. }
  341. },
  342. methods: {
  343. select: function select(item) {
  344. this.dispatch('ElAutocomplete', 'item-click', item);
  345. }
  346. },
  347. updated: function updated() {
  348. var _this = this;
  349. this.$nextTick(function (_) {
  350. _this.updatePopper();
  351. });
  352. },
  353. mounted: function mounted() {
  354. this.popperElm = this.$el;
  355. this.referenceElm = this.$parent.$refs.input.$refs.input;
  356. },
  357. created: function created() {
  358. var _this2 = this;
  359. this.$on('visible', function (val, inputWidth) {
  360. _this2.dropdownWidth = inputWidth + 'px';
  361. _this2.showPopper = val;
  362. });
  363. }
  364. }; //
  365. //
  366. //
  367. //
  368. //
  369. //
  370. //
  371. //
  372. //
  373. //
  374. //
  375. //
  376. //
  377. //
  378. //
  379. //
  380. //
  381. //
  382. //
  383. //
  384. //
  385. //
  386. //
  387. //
  388. //
  389. //
  390. //
  391. //
  392. //
  393. //
  394. //
  395. //
  396. //
  397. //
  398. //
  399. /***/ },
  400. /* 13 */
  401. /***/ function(module, exports) {
  402. module.exports = require("element-ui/lib/utils/vue-popper");
  403. /***/ },
  404. /* 14 */
  405. /***/ function(module, exports) {
  406. module.exports = require("element-ui/lib/mixins/emitter");
  407. /***/ },
  408. /* 15 */
  409. /***/ function(module, exports) {
  410. module.exports = require("element-ui/lib/scrollbar");
  411. /***/ },
  412. /* 16 */
  413. /***/ function(module, exports) {
  414. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  415. return _c('transition', {
  416. attrs: {
  417. "name": "el-zoom-in-top"
  418. },
  419. on: {
  420. "after-leave": _vm.doDestroy
  421. }
  422. }, [_c('div', {
  423. directives: [{
  424. name: "show",
  425. rawName: "v-show",
  426. value: (_vm.showPopper),
  427. expression: "showPopper"
  428. }],
  429. staticClass: "el-autocomplete-suggestion",
  430. class: {
  431. 'is-loading': _vm.parent.loading
  432. },
  433. style: ({
  434. width: _vm.dropdownWidth
  435. })
  436. }, [_c('el-scrollbar', {
  437. attrs: {
  438. "tag": "ul",
  439. "wrap-class": "el-autocomplete-suggestion__wrap",
  440. "view-class": "el-autocomplete-suggestion__list"
  441. }
  442. }, [(_vm.parent.loading) ? _c('li', [_c('i', {
  443. staticClass: "el-icon-loading"
  444. })]) : _vm._l((_vm.suggestions), function(item, index) {
  445. return [(!_vm.parent.customItem) ? _c('li', {
  446. class: {
  447. 'highlighted': _vm.parent.highlightedIndex === index
  448. },
  449. on: {
  450. "click": function($event) {
  451. _vm.select(item)
  452. }
  453. }
  454. }, [_vm._v("\n " + _vm._s(item.value) + "\n ")]) : _c(_vm.parent.customItem, {
  455. tag: "component",
  456. class: {
  457. 'highlighted': _vm.parent.highlightedIndex === index
  458. },
  459. attrs: {
  460. "item": item,
  461. "index": index
  462. },
  463. on: {
  464. "click": function($event) {
  465. _vm.select(item)
  466. }
  467. }
  468. })]
  469. })], 2)], 1)])
  470. },staticRenderFns: []}
  471. /***/ },
  472. /* 17 */
  473. /***/ function(module, exports) {
  474. module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  475. return _c('div', {
  476. directives: [{
  477. name: "clickoutside",
  478. rawName: "v-clickoutside",
  479. value: (_vm.handleClickoutside),
  480. expression: "handleClickoutside"
  481. }],
  482. staticClass: "el-autocomplete"
  483. }, [_c('el-input', {
  484. ref: "input",
  485. attrs: {
  486. "value": _vm.value,
  487. "disabled": _vm.disabled,
  488. "placeholder": _vm.placeholder,
  489. "name": _vm.name,
  490. "size": _vm.size,
  491. "icon": _vm.icon,
  492. "on-icon-click": _vm.onIconClick
  493. },
  494. on: {
  495. "change": _vm.handleChange,
  496. "focus": _vm.handleFocus,
  497. "blur": _vm.handleBlur
  498. },
  499. nativeOn: {
  500. "keydown": [function($event) {
  501. if (_vm._k($event.keyCode, "up", 38)) { return; }
  502. $event.preventDefault();
  503. _vm.highlight(_vm.highlightedIndex - 1)
  504. }, function($event) {
  505. if (_vm._k($event.keyCode, "down", 40)) { return; }
  506. $event.preventDefault();
  507. _vm.highlight(_vm.highlightedIndex + 1)
  508. }, function($event) {
  509. if (_vm._k($event.keyCode, "enter", 13)) { return; }
  510. $event.stopPropagation();
  511. _vm.handleKeyEnter($event)
  512. }]
  513. }
  514. }, [(_vm.$slots.prepend) ? _c('template', {
  515. slot: "prepend"
  516. }, [_vm._t("prepend")], 2) : _vm._e(), (_vm.$slots.append) ? _c('template', {
  517. slot: "append"
  518. }, [_vm._t("append")], 2) : _vm._e()], 2), _c('el-autocomplete-suggestions', {
  519. ref: "suggestions",
  520. class: [_vm.popperClass ? _vm.popperClass : ''],
  521. attrs: {
  522. "suggestions": _vm.suggestions
  523. }
  524. })], 1)
  525. },staticRenderFns: []}
  526. /***/ }
  527. /******/ ]);