1 | module.exports =
|
2 | (function(modules) {
|
3 |
|
4 | var installedModules = {};
|
5 |
|
6 |
|
7 | function __webpack_require__(moduleId) {
|
8 |
|
9 |
|
10 | if(installedModules[moduleId]) {
|
11 | return installedModules[moduleId].exports;
|
12 | }
|
13 |
|
14 | var module = installedModules[moduleId] = {
|
15 | i: moduleId,
|
16 | l: false,
|
17 | exports: {}
|
18 | };
|
19 |
|
20 |
|
21 | modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
22 |
|
23 |
|
24 | module.l = true;
|
25 |
|
26 |
|
27 | return module.exports;
|
28 | }
|
29 |
|
30 |
|
31 |
|
32 | __webpack_require__.m = modules;
|
33 |
|
34 |
|
35 | __webpack_require__.c = installedModules;
|
36 |
|
37 |
|
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 |
|
58 | __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
59 |
|
60 |
|
61 | __webpack_require__.p = "/dist/";
|
62 |
|
63 |
|
64 | return __webpack_require__(__webpack_require__.s = 266);
|
65 | })
|
66 |
|
67 | ({
|
68 |
|
69 | 0:
|
70 | (function(module, exports) {
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | module.exports = function normalizeComponent (
|
79 | rawScriptExports,
|
80 | compiledTemplate,
|
81 | functionalTemplate,
|
82 | injectStyles,
|
83 | scopeId,
|
84 | moduleIdentifier /* server only */
|
85 | ) {
|
86 | var esModule
|
87 | var scriptExports = rawScriptExports = rawScriptExports || {}
|
88 |
|
89 |
|
90 | var type = typeof rawScriptExports.default
|
91 | if (type === 'object' || type === 'function') {
|
92 | esModule = rawScriptExports
|
93 | scriptExports = rawScriptExports.default
|
94 | }
|
95 |
|
96 |
|
97 | var options = typeof scriptExports === 'function'
|
98 | ? scriptExports.options
|
99 | : scriptExports
|
100 |
|
101 |
|
102 | if (compiledTemplate) {
|
103 | options.render = compiledTemplate.render
|
104 | options.staticRenderFns = compiledTemplate.staticRenderFns
|
105 | options._compiled = true
|
106 | }
|
107 |
|
108 |
|
109 | if (functionalTemplate) {
|
110 | options.functional = true
|
111 | }
|
112 |
|
113 |
|
114 | if (scopeId) {
|
115 | options._scopeId = scopeId
|
116 | }
|
117 |
|
118 | var hook
|
119 | if (moduleIdentifier) {
|
120 | hook = function (context) {
|
121 |
|
122 | context =
|
123 | context ||
|
124 | (this.$vnode && this.$vnode.ssrContext) ||
|
125 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext)
|
126 |
|
127 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
128 | context = __VUE_SSR_CONTEXT__
|
129 | }
|
130 |
|
131 | if (injectStyles) {
|
132 | injectStyles.call(this, context)
|
133 | }
|
134 |
|
135 | if (context && context._registeredComponents) {
|
136 | context._registeredComponents.add(moduleIdentifier)
|
137 | }
|
138 | }
|
139 |
|
140 |
|
141 | options._ssrRegister = hook
|
142 | } else if (injectStyles) {
|
143 | hook = injectStyles
|
144 | }
|
145 |
|
146 | if (hook) {
|
147 | var functional = options.functional
|
148 | var existing = functional
|
149 | ? options.render
|
150 | : options.beforeCreate
|
151 |
|
152 | if (!functional) {
|
153 |
|
154 | options.beforeCreate = existing
|
155 | ? [].concat(existing, hook)
|
156 | : [hook]
|
157 | } else {
|
158 |
|
159 |
|
160 | options._injectStyles = hook
|
161 |
|
162 | options.render = function renderWithStyleInjection (h, context) {
|
163 | hook.call(context)
|
164 | return existing(h, context)
|
165 | }
|
166 | }
|
167 | }
|
168 |
|
169 | return {
|
170 | esModule: esModule,
|
171 | exports: scriptExports,
|
172 | options: options
|
173 | }
|
174 | }
|
175 |
|
176 |
|
177 | }),
|
178 |
|
179 | 1:
|
180 | (function(module, exports) {
|
181 |
|
182 | module.exports = require("element-ui/lib/mixins/emitter");
|
183 |
|
184 | }),
|
185 |
|
186 | 22:
|
187 | (function(module, exports) {
|
188 |
|
189 | module.exports = require("element-ui/lib/tooltip");
|
190 |
|
191 | }),
|
192 |
|
193 | 266:
|
194 | (function(module, exports, __webpack_require__) {
|
195 |
|
196 | "use strict";
|
197 |
|
198 |
|
199 | exports.__esModule = true;
|
200 |
|
201 | var _main = __webpack_require__(267);
|
202 |
|
203 | var _main2 = _interopRequireDefault(_main);
|
204 |
|
205 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
206 |
|
207 |
|
208 | _main2.default.install = function (Vue) {
|
209 | Vue.component(_main2.default.name, _main2.default);
|
210 | };
|
211 |
|
212 | exports.default = _main2.default;
|
213 |
|
214 | }),
|
215 |
|
216 | 267:
|
217 | (function(module, __webpack_exports__, __webpack_require__) {
|
218 |
|
219 | "use strict";
|
220 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
221 | var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(268);
|
222 | 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__);
|
223 | var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_25be533e_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(273);
|
224 | var normalizeComponent = __webpack_require__(0)
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 | var __vue_template_functional__ = false
|
231 |
|
232 | var __vue_styles__ = null
|
233 |
|
234 | var __vue_scopeId__ = null
|
235 |
|
236 | var __vue_module_identifier__ = null
|
237 | var Component = normalizeComponent(
|
238 | __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
|
239 | __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_25be533e_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" ],
|
240 | __vue_template_functional__,
|
241 | __vue_styles__,
|
242 | __vue_scopeId__,
|
243 | __vue_module_identifier__
|
244 | )
|
245 |
|
246 | __webpack_exports__["default"] = (Component.exports);
|
247 |
|
248 |
|
249 | }),
|
250 |
|
251 | 268:
|
252 | (function(module, exports, __webpack_require__) {
|
253 |
|
254 | "use strict";
|
255 |
|
256 |
|
257 | exports.__esModule = true;
|
258 |
|
259 | var _inputNumber = __webpack_require__(269);
|
260 |
|
261 | var _inputNumber2 = _interopRequireDefault(_inputNumber);
|
262 |
|
263 | var _button = __webpack_require__(270);
|
264 |
|
265 | var _button2 = _interopRequireDefault(_button);
|
266 |
|
267 | var _emitter = __webpack_require__(1);
|
268 |
|
269 | var _emitter2 = _interopRequireDefault(_emitter);
|
270 |
|
271 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
272 |
|
273 | exports.default = {
|
274 | name: 'ElSlider',
|
275 |
|
276 | mixins: [_emitter2.default],
|
277 |
|
278 | inject: {
|
279 | elForm: {
|
280 | default: ''
|
281 | }
|
282 | },
|
283 |
|
284 | props: {
|
285 | min: {
|
286 | type: Number,
|
287 | default: 0
|
288 | },
|
289 | max: {
|
290 | type: Number,
|
291 | default: 100
|
292 | },
|
293 | step: {
|
294 | type: Number,
|
295 | default: 1
|
296 | },
|
297 | value: {
|
298 | type: [Number, Array],
|
299 | default: 0
|
300 | },
|
301 | showInput: {
|
302 | type: Boolean,
|
303 | default: false
|
304 | },
|
305 | showInputControls: {
|
306 | type: Boolean,
|
307 | default: true
|
308 | },
|
309 | inputSize: {
|
310 | type: String,
|
311 | default: 'small'
|
312 | },
|
313 | showStops: {
|
314 | type: Boolean,
|
315 | default: false
|
316 | },
|
317 | showTooltip: {
|
318 | type: Boolean,
|
319 | default: true
|
320 | },
|
321 | formatTooltip: Function,
|
322 | disabled: {
|
323 | type: Boolean,
|
324 | default: false
|
325 | },
|
326 | range: {
|
327 | type: Boolean,
|
328 | default: false
|
329 | },
|
330 | vertical: {
|
331 | type: Boolean,
|
332 | default: false
|
333 | },
|
334 | height: {
|
335 | type: String
|
336 | },
|
337 | debounce: {
|
338 | type: Number,
|
339 | default: 300
|
340 | },
|
341 | label: {
|
342 | type: String
|
343 | },
|
344 | tooltipClass: String
|
345 | },
|
346 |
|
347 | components: {
|
348 | ElInputNumber: _inputNumber2.default,
|
349 | SliderButton: _button2.default
|
350 | },
|
351 |
|
352 | data: function data() {
|
353 | return {
|
354 | firstValue: null,
|
355 | secondValue: null,
|
356 | oldValue: null,
|
357 | dragging: false,
|
358 | sliderSize: 1
|
359 | };
|
360 | },
|
361 |
|
362 |
|
363 | watch: {
|
364 | value: function value(val, oldVal) {
|
365 | if (this.dragging || Array.isArray(val) && Array.isArray(oldVal) && val.every(function (item, index) {
|
366 | return item === oldVal[index];
|
367 | })) {
|
368 | return;
|
369 | }
|
370 | this.setValues();
|
371 | },
|
372 | dragging: function dragging(val) {
|
373 | if (!val) {
|
374 | this.setValues();
|
375 | }
|
376 | },
|
377 | firstValue: function firstValue(val) {
|
378 | if (this.range) {
|
379 | this.$emit('input', [this.minValue, this.maxValue]);
|
380 | } else {
|
381 | this.$emit('input', val);
|
382 | }
|
383 | },
|
384 | secondValue: function secondValue() {
|
385 | if (this.range) {
|
386 | this.$emit('input', [this.minValue, this.maxValue]);
|
387 | }
|
388 | },
|
389 | min: function min() {
|
390 | this.setValues();
|
391 | },
|
392 | max: function max() {
|
393 | this.setValues();
|
394 | }
|
395 | },
|
396 |
|
397 | methods: {
|
398 | valueChanged: function valueChanged() {
|
399 | var _this = this;
|
400 |
|
401 | if (this.range) {
|
402 | return ![this.minValue, this.maxValue].every(function (item, index) {
|
403 | return item === _this.oldValue[index];
|
404 | });
|
405 | } else {
|
406 | return this.value !== this.oldValue;
|
407 | }
|
408 | },
|
409 | setValues: function setValues() {
|
410 | if (this.min > this.max) {
|
411 | console.error('[Element Error][Slider]min should not be greater than max.');
|
412 | return;
|
413 | }
|
414 | var val = this.value;
|
415 | if (this.range && Array.isArray(val)) {
|
416 | if (val[1] < this.min) {
|
417 | this.$emit('input', [this.min, this.min]);
|
418 | } else if (val[0] > this.max) {
|
419 | this.$emit('input', [this.max, this.max]);
|
420 | } else if (val[0] < this.min) {
|
421 | this.$emit('input', [this.min, val[1]]);
|
422 | } else if (val[1] > this.max) {
|
423 | this.$emit('input', [val[0], this.max]);
|
424 | } else {
|
425 | this.firstValue = val[0];
|
426 | this.secondValue = val[1];
|
427 | if (this.valueChanged()) {
|
428 | this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
|
429 | this.oldValue = val.slice();
|
430 | }
|
431 | }
|
432 | } else if (!this.range && typeof val === 'number' && !isNaN(val)) {
|
433 | if (val < this.min) {
|
434 | this.$emit('input', this.min);
|
435 | } else if (val > this.max) {
|
436 | this.$emit('input', this.max);
|
437 | } else {
|
438 | this.firstValue = val;
|
439 | if (this.valueChanged()) {
|
440 | this.dispatch('ElFormItem', 'el.form.change', val);
|
441 | this.oldValue = val;
|
442 | }
|
443 | }
|
444 | }
|
445 | },
|
446 | setPosition: function setPosition(percent) {
|
447 | var targetValue = this.min + percent * (this.max - this.min) / 100;
|
448 | if (!this.range) {
|
449 | this.$refs.button1.setPosition(percent);
|
450 | return;
|
451 | }
|
452 | var button = void 0;
|
453 | if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) {
|
454 | button = this.firstValue < this.secondValue ? 'button1' : 'button2';
|
455 | } else {
|
456 | button = this.firstValue > this.secondValue ? 'button1' : 'button2';
|
457 | }
|
458 | this.$refs[button].setPosition(percent);
|
459 | },
|
460 | onSliderClick: function onSliderClick(event) {
|
461 | if (this.sliderDisabled || this.dragging) return;
|
462 | this.resetSize();
|
463 | if (this.vertical) {
|
464 | var sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
|
465 | this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);
|
466 | } else {
|
467 | var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
|
468 | this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);
|
469 | }
|
470 | this.emitChange();
|
471 | },
|
472 | resetSize: function resetSize() {
|
473 | if (this.$refs.slider) {
|
474 | this.sliderSize = this.$refs.slider['client' + (this.vertical ? 'Height' : 'Width')];
|
475 | }
|
476 | },
|
477 | emitChange: function emitChange() {
|
478 | var _this2 = this;
|
479 |
|
480 | this.$nextTick(function () {
|
481 | _this2.$emit('change', _this2.range ? [_this2.minValue, _this2.maxValue] : _this2.value);
|
482 | });
|
483 | }
|
484 | },
|
485 |
|
486 | computed: {
|
487 | stops: function stops() {
|
488 | var _this3 = this;
|
489 |
|
490 | if (!this.showStops || this.min > this.max) return [];
|
491 | if (this.step === 0) {
|
492 | "production" !== 'production' && console.warn('[Element Warn][Slider]step should not be 0.');
|
493 | return [];
|
494 | }
|
495 | var stopCount = (this.max - this.min) / this.step;
|
496 | var stepWidth = 100 * this.step / (this.max - this.min);
|
497 | var result = [];
|
498 | for (var i = 1; i < stopCount; i++) {
|
499 | result.push(i * stepWidth);
|
500 | }
|
501 | if (this.range) {
|
502 | return result.filter(function (step) {
|
503 | return step < 100 * (_this3.minValue - _this3.min) / (_this3.max - _this3.min) || step > 100 * (_this3.maxValue - _this3.min) / (_this3.max - _this3.min);
|
504 | });
|
505 | } else {
|
506 | return result.filter(function (step) {
|
507 | return step > 100 * (_this3.firstValue - _this3.min) / (_this3.max - _this3.min);
|
508 | });
|
509 | }
|
510 | },
|
511 | minValue: function minValue() {
|
512 | return Math.min(this.firstValue, this.secondValue);
|
513 | },
|
514 | maxValue: function maxValue() {
|
515 | return Math.max(this.firstValue, this.secondValue);
|
516 | },
|
517 | barSize: function barSize() {
|
518 | return this.range ? 100 * (this.maxValue - this.minValue) / (this.max - this.min) + '%' : 100 * (this.firstValue - this.min) / (this.max - this.min) + '%';
|
519 | },
|
520 | barStart: function barStart() {
|
521 | return this.range ? 100 * (this.minValue - this.min) / (this.max - this.min) + '%' : '0%';
|
522 | },
|
523 | precision: function precision() {
|
524 | var precisions = [this.min, this.max, this.step].map(function (item) {
|
525 | var decimal = ('' + item).split('.')[1];
|
526 | return decimal ? decimal.length : 0;
|
527 | });
|
528 | return Math.max.apply(null, precisions);
|
529 | },
|
530 | runwayStyle: function runwayStyle() {
|
531 | return this.vertical ? { height: this.height } : {};
|
532 | },
|
533 | barStyle: function barStyle() {
|
534 | return this.vertical ? {
|
535 | height: this.barSize,
|
536 | bottom: this.barStart
|
537 | } : {
|
538 | width: this.barSize,
|
539 | left: this.barStart
|
540 | };
|
541 | },
|
542 | sliderDisabled: function sliderDisabled() {
|
543 | return this.disabled || (this.elForm || {}).disabled;
|
544 | }
|
545 | },
|
546 |
|
547 | mounted: function mounted() {
|
548 | var valuetext = void 0;
|
549 | if (this.range) {
|
550 | if (Array.isArray(this.value)) {
|
551 | this.firstValue = Math.max(this.min, this.value[0]);
|
552 | this.secondValue = Math.min(this.max, this.value[1]);
|
553 | } else {
|
554 | this.firstValue = this.min;
|
555 | this.secondValue = this.max;
|
556 | }
|
557 | this.oldValue = [this.firstValue, this.secondValue];
|
558 | valuetext = this.firstValue + '-' + this.secondValue;
|
559 | } else {
|
560 | if (typeof this.value !== 'number' || isNaN(this.value)) {
|
561 | this.firstValue = this.min;
|
562 | } else {
|
563 | this.firstValue = Math.min(this.max, Math.max(this.min, this.value));
|
564 | }
|
565 | this.oldValue = this.firstValue;
|
566 | valuetext = this.firstValue;
|
567 | }
|
568 | this.$el.setAttribute('aria-valuetext', valuetext);
|
569 |
|
570 |
|
571 | this.$el.setAttribute('aria-label', this.label ? this.label : 'slider between ' + this.min + ' and ' + this.max);
|
572 |
|
573 | this.resetSize();
|
574 | window.addEventListener('resize', this.resetSize);
|
575 | },
|
576 | beforeDestroy: function beforeDestroy() {
|
577 | window.removeEventListener('resize', this.resetSize);
|
578 | }
|
579 | };
|
580 |
|
581 |
|
582 |
|
583 |
|
584 |
|
585 |
|
586 |
|
587 |
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 |
|
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 |
|
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 |
|
607 |
|
608 |
|
609 |
|
610 |
|
611 |
|
612 |
|
613 |
|
614 |
|
615 |
|
616 |
|
617 |
|
618 |
|
619 |
|
620 |
|
621 |
|
622 |
|
623 |
|
624 |
|
625 |
|
626 |
|
627 |
|
628 |
|
629 |
|
630 |
|
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 | }),
|
637 |
|
638 | 269:
|
639 | (function(module, exports) {
|
640 |
|
641 | module.exports = require("element-ui/lib/input-number");
|
642 |
|
643 | }),
|
644 |
|
645 | 270:
|
646 | (function(module, __webpack_exports__, __webpack_require__) {
|
647 |
|
648 | "use strict";
|
649 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
650 | var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_button_vue__ = __webpack_require__(271);
|
651 | var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_button_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_button_vue__);
|
652 | var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_60e22f5a_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_button_vue__ = __webpack_require__(272);
|
653 | var normalizeComponent = __webpack_require__(0)
|
654 |
|
655 |
|
656 |
|
657 |
|
658 |
|
659 | var __vue_template_functional__ = false
|
660 |
|
661 | var __vue_styles__ = null
|
662 |
|
663 | var __vue_scopeId__ = null
|
664 |
|
665 | var __vue_module_identifier__ = null
|
666 | var Component = normalizeComponent(
|
667 | __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_button_vue___default.a,
|
668 | __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_60e22f5a_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_button_vue__["a" ],
|
669 | __vue_template_functional__,
|
670 | __vue_styles__,
|
671 | __vue_scopeId__,
|
672 | __vue_module_identifier__
|
673 | )
|
674 |
|
675 | __webpack_exports__["default"] = (Component.exports);
|
676 |
|
677 |
|
678 | }),
|
679 |
|
680 | 271:
|
681 | (function(module, exports, __webpack_require__) {
|
682 |
|
683 | "use strict";
|
684 |
|
685 |
|
686 | exports.__esModule = true;
|
687 |
|
688 | var _tooltip = __webpack_require__(22);
|
689 |
|
690 | var _tooltip2 = _interopRequireDefault(_tooltip);
|
691 |
|
692 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
693 |
|
694 | exports.default = {
|
695 | name: 'ElSliderButton',
|
696 |
|
697 | components: {
|
698 | ElTooltip: _tooltip2.default
|
699 | },
|
700 |
|
701 | props: {
|
702 | value: {
|
703 | type: Number,
|
704 | default: 0
|
705 | },
|
706 | vertical: {
|
707 | type: Boolean,
|
708 | default: false
|
709 | },
|
710 | tooltipClass: String
|
711 | },
|
712 |
|
713 | data: function data() {
|
714 | return {
|
715 | hovering: false,
|
716 | dragging: false,
|
717 | isClick: false,
|
718 | startX: 0,
|
719 | currentX: 0,
|
720 | startY: 0,
|
721 | currentY: 0,
|
722 | startPosition: 0,
|
723 | newPosition: null,
|
724 | oldValue: this.value
|
725 | };
|
726 | },
|
727 |
|
728 |
|
729 | computed: {
|
730 | disabled: function disabled() {
|
731 | return this.$parent.sliderDisabled;
|
732 | },
|
733 | max: function max() {
|
734 | return this.$parent.max;
|
735 | },
|
736 | min: function min() {
|
737 | return this.$parent.min;
|
738 | },
|
739 | step: function step() {
|
740 | return this.$parent.step;
|
741 | },
|
742 | showTooltip: function showTooltip() {
|
743 | return this.$parent.showTooltip;
|
744 | },
|
745 | precision: function precision() {
|
746 | return this.$parent.precision;
|
747 | },
|
748 | currentPosition: function currentPosition() {
|
749 | return (this.value - this.min) / (this.max - this.min) * 100 + '%';
|
750 | },
|
751 | enableFormat: function enableFormat() {
|
752 | return this.$parent.formatTooltip instanceof Function;
|
753 | },
|
754 | formatValue: function formatValue() {
|
755 | return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
|
756 | },
|
757 | wrapperStyle: function wrapperStyle() {
|
758 | return this.vertical ? { bottom: this.currentPosition } : { left: this.currentPosition };
|
759 | }
|
760 | },
|
761 |
|
762 | watch: {
|
763 | dragging: function dragging(val) {
|
764 | this.$parent.dragging = val;
|
765 | }
|
766 | },
|
767 |
|
768 | methods: {
|
769 | displayTooltip: function displayTooltip() {
|
770 | this.$refs.tooltip && (this.$refs.tooltip.showPopper = true);
|
771 | },
|
772 | hideTooltip: function hideTooltip() {
|
773 | this.$refs.tooltip && (this.$refs.tooltip.showPopper = false);
|
774 | },
|
775 | handleMouseEnter: function handleMouseEnter() {
|
776 | this.hovering = true;
|
777 | this.displayTooltip();
|
778 | },
|
779 | handleMouseLeave: function handleMouseLeave() {
|
780 | this.hovering = false;
|
781 | this.hideTooltip();
|
782 | },
|
783 | onButtonDown: function onButtonDown(event) {
|
784 | if (this.disabled) return;
|
785 | event.preventDefault();
|
786 | this.onDragStart(event);
|
787 | window.addEventListener('mousemove', this.onDragging);
|
788 | window.addEventListener('touchmove', this.onDragging);
|
789 | window.addEventListener('mouseup', this.onDragEnd);
|
790 | window.addEventListener('touchend', this.onDragEnd);
|
791 | window.addEventListener('contextmenu', this.onDragEnd);
|
792 | },
|
793 | onLeftKeyDown: function onLeftKeyDown() {
|
794 | if (this.disabled) return;
|
795 | this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;
|
796 | this.setPosition(this.newPosition);
|
797 | },
|
798 | onRightKeyDown: function onRightKeyDown() {
|
799 | if (this.disabled) return;
|
800 | this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;
|
801 | this.setPosition(this.newPosition);
|
802 | },
|
803 | onDragStart: function onDragStart(event) {
|
804 | this.dragging = true;
|
805 | this.isClick = true;
|
806 | if (event.type === 'touchstart') {
|
807 | event.clientY = event.touches[0].clientY;
|
808 | event.clientX = event.touches[0].clientX;
|
809 | }
|
810 | if (this.vertical) {
|
811 | this.startY = event.clientY;
|
812 | } else {
|
813 | this.startX = event.clientX;
|
814 | }
|
815 | this.startPosition = parseFloat(this.currentPosition);
|
816 | this.newPosition = this.startPosition;
|
817 | },
|
818 | onDragging: function onDragging(event) {
|
819 | if (this.dragging) {
|
820 | this.isClick = false;
|
821 | this.displayTooltip();
|
822 | this.$parent.resetSize();
|
823 | var diff = 0;
|
824 | if (event.type === 'touchmove') {
|
825 | event.clientY = event.touches[0].clientY;
|
826 | event.clientX = event.touches[0].clientX;
|
827 | }
|
828 | if (this.vertical) {
|
829 | this.currentY = event.clientY;
|
830 | diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
|
831 | } else {
|
832 | this.currentX = event.clientX;
|
833 | diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;
|
834 | }
|
835 | this.newPosition = this.startPosition + diff;
|
836 | this.setPosition(this.newPosition);
|
837 | }
|
838 | },
|
839 | onDragEnd: function onDragEnd() {
|
840 | var _this = this;
|
841 |
|
842 | if (this.dragging) {
|
843 | |
844 |
|
845 |
|
846 |
|
847 | setTimeout(function () {
|
848 | _this.dragging = false;
|
849 | _this.hideTooltip();
|
850 | if (!_this.isClick) {
|
851 | _this.setPosition(_this.newPosition);
|
852 | _this.$parent.emitChange();
|
853 | }
|
854 | }, 0);
|
855 | window.removeEventListener('mousemove', this.onDragging);
|
856 | window.removeEventListener('touchmove', this.onDragging);
|
857 | window.removeEventListener('mouseup', this.onDragEnd);
|
858 | window.removeEventListener('touchend', this.onDragEnd);
|
859 | window.removeEventListener('contextmenu', this.onDragEnd);
|
860 | }
|
861 | },
|
862 | setPosition: function setPosition(newPosition) {
|
863 | var _this2 = this;
|
864 |
|
865 | if (newPosition === null || isNaN(newPosition)) return;
|
866 | if (newPosition < 0) {
|
867 | newPosition = 0;
|
868 | } else if (newPosition > 100) {
|
869 | newPosition = 100;
|
870 | }
|
871 | var lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
872 | var steps = Math.round(newPosition / lengthPerStep);
|
873 | var value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;
|
874 | value = parseFloat(value.toFixed(this.precision));
|
875 | this.$emit('input', value);
|
876 | this.$nextTick(function () {
|
877 | _this2.$refs.tooltip && _this2.$refs.tooltip.updatePopper();
|
878 | });
|
879 | if (!this.dragging && this.value !== this.oldValue) {
|
880 | this.oldValue = this.value;
|
881 | }
|
882 | }
|
883 | }
|
884 | };
|
885 |
|
886 |
|
887 |
|
888 |
|
889 |
|
890 |
|
891 |
|
892 |
|
893 |
|
894 |
|
895 |
|
896 |
|
897 |
|
898 |
|
899 |
|
900 |
|
901 |
|
902 |
|
903 |
|
904 |
|
905 |
|
906 |
|
907 |
|
908 |
|
909 |
|
910 |
|
911 |
|
912 |
|
913 |
|
914 | }),
|
915 |
|
916 | 272:
|
917 | (function(module, __webpack_exports__, __webpack_require__) {
|
918 |
|
919 | "use strict";
|
920 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"button",staticClass:"el-slider__button-wrapper",class:{ 'hover': _vm.hovering, 'dragging': _vm.dragging },style:(_vm.wrapperStyle),attrs:{"tabindex":"0"},on:{"mouseenter":_vm.handleMouseEnter,"mouseleave":_vm.handleMouseLeave,"mousedown":_vm.onButtonDown,"touchstart":_vm.onButtonDown,"focus":_vm.handleMouseEnter,"blur":_vm.handleMouseLeave,"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"left",37,$event.key)){ return null; }if('button' in $event && $event.button !== 0){ return null; }_vm.onLeftKeyDown($event)},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"right",39,$event.key)){ return null; }if('button' in $event && $event.button !== 2){ return null; }_vm.onRightKeyDown($event)},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"down",40,$event.key)){ return null; }$event.preventDefault();_vm.onLeftKeyDown($event)},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"up",38,$event.key)){ return null; }$event.preventDefault();_vm.onRightKeyDown($event)}]}},[_c('el-tooltip',{ref:"tooltip",attrs:{"placement":"top","popper-class":_vm.tooltipClass,"disabled":!_vm.showTooltip}},[_c('span',{attrs:{"slot":"content"},slot:"content"},[_vm._v(_vm._s(_vm.formatValue))]),_c('div',{staticClass:"el-slider__button",class:{ 'hover': _vm.hovering, 'dragging': _vm.dragging }})])],1)}
|
921 | var staticRenderFns = []
|
922 | var esExports = { render: render, staticRenderFns: staticRenderFns }
|
923 | __webpack_exports__["a"] = (esExports);
|
924 |
|
925 | }),
|
926 |
|
927 | 273:
|
928 | (function(module, __webpack_exports__, __webpack_require__) {
|
929 |
|
930 | "use strict";
|
931 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-slider",class:{ 'is-vertical': _vm.vertical, 'el-slider--with-input': _vm.showInput },attrs:{"role":"slider","aria-valuemin":_vm.min,"aria-valuemax":_vm.max,"aria-orientation":_vm.vertical ? 'vertical': 'horizontal',"aria-disabled":_vm.sliderDisabled}},[(_vm.showInput && !_vm.range)?_c('el-input-number',{ref:"input",staticClass:"el-slider__input",attrs:{"step":_vm.step,"disabled":_vm.sliderDisabled,"controls":_vm.showInputControls,"min":_vm.min,"max":_vm.max,"debounce":_vm.debounce,"size":_vm.inputSize},on:{"change":function($event){_vm.$nextTick(_vm.emitChange)}},model:{value:(_vm.firstValue),callback:function ($$v) {_vm.firstValue=$$v},expression:"firstValue"}}):_vm._e(),_c('div',{ref:"slider",staticClass:"el-slider__runway",class:{ 'show-input': _vm.showInput, 'disabled': _vm.sliderDisabled },style:(_vm.runwayStyle),on:{"click":_vm.onSliderClick}},[_c('div',{staticClass:"el-slider__bar",style:(_vm.barStyle)}),_c('slider-button',{ref:"button1",attrs:{"vertical":_vm.vertical,"tooltip-class":_vm.tooltipClass},model:{value:(_vm.firstValue),callback:function ($$v) {_vm.firstValue=$$v},expression:"firstValue"}}),(_vm.range)?_c('slider-button',{ref:"button2",attrs:{"vertical":_vm.vertical,"tooltip-class":_vm.tooltipClass},model:{value:(_vm.secondValue),callback:function ($$v) {_vm.secondValue=$$v},expression:"secondValue"}}):_vm._e(),_vm._l((_vm.stops),function(item,key){return (_vm.showStops)?_c('div',{key:key,staticClass:"el-slider__stop",style:(_vm.vertical ? { 'bottom': item + '%' } : { 'left': item + '%' })}):_vm._e()})],2)],1)}
|
932 | var staticRenderFns = []
|
933 | var esExports = { render: render, staticRenderFns: staticRenderFns }
|
934 | __webpack_exports__["a"] = (esExports);
|
935 |
|
936 | })
|
937 |
|
938 | }); |
\ | No newline at end of file |