mindoc/static/element-ui/lib/slider.js
2017-04-19 18:19:27 +08:00

790 lines
19 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(268);
/***/ },
/***/ 3:
/***/ function(module, exports) {
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
scopeId,
cssModules
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
// inject cssModules
if (cssModules) {
var computed = options.computed || (options.computed = {})
Object.keys(cssModules).forEach(function (key) {
var module = cssModules[key]
computed[key] = function () { return module }
})
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ },
/***/ 14:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/mixins/emitter");
/***/ },
/***/ 117:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/utils/dom");
/***/ },
/***/ 268:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _main = __webpack_require__(269);
var _main2 = _interopRequireDefault(_main);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* istanbul ignore next */
_main2.default.install = function (Vue) {
Vue.component(_main2.default.name, _main2.default);
};
exports.default = _main2.default;
/***/ },
/***/ 269:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(270),
/* template */
__webpack_require__(276),
/* scopeId */
null,
/* cssModules */
null
)
module.exports = Component.exports
/***/ },
/***/ 270:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _inputNumber = __webpack_require__(271);
var _inputNumber2 = _interopRequireDefault(_inputNumber);
var _button = __webpack_require__(272);
var _button2 = _interopRequireDefault(_button);
var _dom = __webpack_require__(117);
var _emitter = __webpack_require__(14);
var _emitter2 = _interopRequireDefault(_emitter);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
name: 'ElSlider',
mixins: [_emitter2.default],
props: {
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
value: {
type: [Number, Array],
default: 0
},
showInput: {
type: Boolean,
default: false
},
showInputControls: {
type: Boolean,
default: true
},
showStops: {
type: Boolean,
default: false
},
showTooltip: {
type: Boolean,
default: true
},
formatTooltip: Function,
disabled: {
type: Boolean,
default: false
},
range: {
type: Boolean,
default: false
}
},
components: {
ElInputNumber: _inputNumber2.default,
SliderButton: _button2.default
},
data: function data() {
return {
firstValue: null,
secondValue: null,
oldValue: null,
dragging: false
};
},
watch: {
value: function value(val, oldVal) {
if (this.dragging || Array.isArray(val) && Array.isArray(oldVal) && val.every(function (item, index) {
return item === oldVal[index];
})) {
return;
}
this.setValues();
},
dragging: function dragging(val) {
if (!val) {
this.setValues();
}
},
firstValue: function firstValue(val) {
if (this.range) {
this.$emit('input', [this.minValue, this.maxValue]);
} else {
this.$emit('input', val);
}
},
secondValue: function secondValue() {
if (this.range) {
this.$emit('input', [this.minValue, this.maxValue]);
}
},
min: function min() {
this.setValues();
},
max: function max() {
this.setValues();
}
},
methods: {
valueChanged: function valueChanged() {
var _this = this;
if (this.range) {
return ![this.minValue, this.maxValue].every(function (item, index) {
return item === _this.oldValue[index];
});
} else {
return this.value !== this.oldValue;
}
},
setValues: function setValues() {
var val = this.value;
if (this.range && Array.isArray(val)) {
if (val[1] < this.min) {
this.$emit('input', [this.min, this.min]);
} else if (val[0] > this.max) {
this.$emit('input', [this.max, this.max]);
} else if (val[0] < this.min) {
this.$emit('input', [this.min, val[1]]);
} else if (val[1] > this.max) {
this.$emit('input', [val[0], this.max]);
} else {
this.firstValue = val[0];
this.secondValue = val[1];
if (this.valueChanged()) {
this.$emit('change', [this.minValue, this.maxValue]);
this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
this.oldValue = val.slice();
}
}
} else if (!this.range && typeof val === 'number' && !isNaN(val)) {
if (val < this.min) {
this.$emit('input', this.min);
} else if (val > this.max) {
this.$emit('input', this.max);
} else {
this.firstValue = val;
if (this.valueChanged()) {
this.$emit('change', val);
this.dispatch('ElFormItem', 'el.form.change', val);
this.oldValue = val;
}
}
}
},
setPosition: function setPosition(percent) {
var targetValue = this.min + percent * (this.max - this.min) / 100;
if (!this.range) {
this.$refs.button1.setPosition(percent);
return;
}
var button = void 0;
if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) {
button = this.firstValue < this.secondValue ? 'button1' : 'button2';
} else {
button = this.firstValue > this.secondValue ? 'button1' : 'button2';
}
this.$refs[button].setPosition(percent);
},
onSliderClick: function onSliderClick(event) {
if (this.disabled || this.dragging) return;
var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderWidth * 100);
}
},
computed: {
$sliderWidth: function $sliderWidth() {
return parseInt((0, _dom.getStyle)(this.$refs.slider, 'width'), 10);
},
stops: function stops() {
var _this2 = this;
var stopCount = (this.max - this.min) / this.step;
var stepWidth = 100 * this.step / (this.max - this.min);
var result = [];
for (var i = 1; i < stopCount; i++) {
result.push(i * stepWidth);
}
if (this.range) {
return result.filter(function (step) {
return step < 100 * (_this2.minValue - _this2.min) / (_this2.max - _this2.min) || step > 100 * (_this2.maxValue - _this2.min) / (_this2.max - _this2.min);
});
} else {
return result.filter(function (step) {
return step > 100 * (_this2.firstValue - _this2.min) / (_this2.max - _this2.min);
});
}
},
minValue: function minValue() {
return Math.min(this.firstValue, this.secondValue);
},
maxValue: function maxValue() {
return Math.max(this.firstValue, this.secondValue);
},
barWidth: function barWidth() {
return this.range ? 100 * (this.maxValue - this.minValue) / (this.max - this.min) + '%' : 100 * (this.firstValue - this.min) / (this.max - this.min) + '%';
},
barLeft: function barLeft() {
return this.range ? 100 * (this.minValue - this.min) / (this.max - this.min) + '%' : '0%';
},
precision: function precision() {
var precisions = [this.min, this.max, this.step].map(function (item) {
var decimal = ('' + item).split('.')[1];
return decimal ? decimal.length : 0;
});
return Math.max.apply(null, precisions);
}
},
mounted: function mounted() {
if (this.range) {
if (Array.isArray(this.value)) {
this.firstValue = Math.max(this.min, this.value[0]);
this.secondValue = Math.min(this.max, this.value[1]);
} else {
this.firstValue = this.min;
this.secondValue = this.max;
}
this.oldValue = [this.firstValue, this.secondValue];
} else {
if (typeof this.value !== 'number' || isNaN(this.value)) {
this.firstValue = this.min;
} else {
this.firstValue = Math.min(this.max, Math.max(this.min, this.value));
}
this.oldValue = this.firstValue;
}
}
};
/***/ },
/***/ 271:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/input-number");
/***/ },
/***/ 272:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(273),
/* template */
__webpack_require__(275),
/* scopeId */
null,
/* cssModules */
null
)
module.exports = Component.exports
/***/ },
/***/ 273:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _tooltip = __webpack_require__(274);
var _tooltip2 = _interopRequireDefault(_tooltip);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: 'ElSliderButton',
components: {
ElTooltip: _tooltip2.default
},
props: {
value: {
type: Number,
default: 0
}
},
data: function data() {
return {
hovering: false,
dragging: false,
startX: 0,
currentX: 0,
startPosition: 0,
newPosition: null,
oldValue: this.value
};
},
computed: {
disabled: function disabled() {
return this.$parent.disabled;
},
max: function max() {
return this.$parent.max;
},
min: function min() {
return this.$parent.min;
},
step: function step() {
return this.$parent.step;
},
showTooltip: function showTooltip() {
return this.$parent.showTooltip;
},
precision: function precision() {
return this.$parent.precision;
},
currentPosition: function currentPosition() {
return (this.value - this.min) / (this.max - this.min) * 100 + '%';
},
enableFormat: function enableFormat() {
return this.$parent.formatTooltip instanceof Function;
},
formatValue: function formatValue() {
return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
}
},
watch: {
dragging: function dragging(val) {
this.$parent.dragging = val;
}
},
methods: {
displayTooltip: function displayTooltip() {
this.$refs.tooltip && (this.$refs.tooltip.showPopper = true);
},
hideTooltip: function hideTooltip() {
this.$refs.tooltip && (this.$refs.tooltip.showPopper = false);
},
handleMouseEnter: function handleMouseEnter() {
this.hovering = true;
this.displayTooltip();
},
handleMouseLeave: function handleMouseLeave() {
this.hovering = false;
this.hideTooltip();
},
onButtonDown: function onButtonDown(event) {
if (this.disabled) return;
event.preventDefault();
this.onDragStart(event);
window.addEventListener('mousemove', this.onDragging);
window.addEventListener('mouseup', this.onDragEnd);
window.addEventListener('contextmenu', this.onDragEnd);
},
onDragStart: function onDragStart(event) {
this.dragging = true;
this.startX = event.clientX;
this.startPosition = parseFloat(this.currentPosition);
},
onDragging: function onDragging(event) {
if (this.dragging) {
this.displayTooltip();
this.currentX = event.clientX;
var diff = (this.currentX - this.startX) / this.$parent.$sliderWidth * 100;
this.newPosition = this.startPosition + diff;
this.setPosition(this.newPosition);
}
},
onDragEnd: function onDragEnd() {
var _this = this;
if (this.dragging) {
/*
* 防止在 mouseup 后立即触发 click导致滑块有几率产生一小段位移
* 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
*/
setTimeout(function () {
_this.dragging = false;
_this.hideTooltip();
_this.setPosition(_this.newPosition);
}, 0);
window.removeEventListener('mousemove', this.onDragging);
window.removeEventListener('mouseup', this.onDragEnd);
window.removeEventListener('contextmenu', this.onDragEnd);
}
},
setPosition: function setPosition(newPosition) {
if (newPosition < 0) {
newPosition = 0;
} else if (newPosition > 100) {
newPosition = 100;
}
var lengthPerStep = 100 / ((this.max - this.min) / this.step);
var steps = Math.round(newPosition / lengthPerStep);
var value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;
value = parseFloat(value.toFixed(this.precision));
this.$emit('input', value);
this.$refs.tooltip && this.$refs.tooltip.updatePopper();
if (!this.dragging && this.value !== this.oldValue) {
this.oldValue = this.value;
}
}
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ },
/***/ 274:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/tooltip");
/***/ },
/***/ 275:
/***/ function(module, exports) {
module.exports={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: ({
left: _vm.currentPosition
}),
on: {
"mouseenter": _vm.handleMouseEnter,
"mouseleave": _vm.handleMouseLeave,
"mousedown": _vm.onButtonDown
}
}, [_c('el-tooltip', {
ref: "tooltip",
attrs: {
"placement": "top",
"disabled": !_vm.showTooltip
}
}, [_c('span', {
slot: "content"
}, [_vm._v(_vm._s(_vm.formatValue))]), _c('div', {
staticClass: "el-slider__button",
class: {
'hover': _vm.hovering, 'dragging': _vm.dragging
}
})])], 1)
},staticRenderFns: []}
/***/ },
/***/ 276:
/***/ function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: "el-slider"
}, [(_vm.showInput && !_vm.range) ? _c('el-input-number', {
directives: [{
name: "model",
rawName: "v-model",
value: (_vm.firstValue),
expression: "firstValue"
}],
ref: "input",
staticClass: "el-slider__input",
attrs: {
"step": _vm.step,
"disabled": _vm.disabled,
"controls": _vm.showInputControls,
"min": _vm.min,
"max": _vm.max,
"size": "small"
},
domProps: {
"value": (_vm.firstValue)
},
on: {
"input": function($event) {
_vm.firstValue = $event
}
}
}) : _vm._e(), _c('div', {
ref: "slider",
staticClass: "el-slider__runway",
class: {
'show-input': _vm.showInput, 'disabled': _vm.disabled
},
on: {
"click": _vm.onSliderClick
}
}, [_c('div', {
staticClass: "el-slider__bar",
style: ({
width: _vm.barWidth,
left: _vm.barLeft
})
}), _c('slider-button', {
directives: [{
name: "model",
rawName: "v-model",
value: (_vm.firstValue),
expression: "firstValue"
}],
ref: "button1",
domProps: {
"value": (_vm.firstValue)
},
on: {
"input": function($event) {
_vm.firstValue = $event
}
}
}), (_vm.range) ? _c('slider-button', {
directives: [{
name: "model",
rawName: "v-model",
value: (_vm.secondValue),
expression: "secondValue"
}],
ref: "button2",
domProps: {
"value": (_vm.secondValue)
},
on: {
"input": function($event) {
_vm.secondValue = $event
}
}
}) : _vm._e(), _vm._l((_vm.stops), function(item) {
return (_vm.showStops) ? _c('div', {
staticClass: "el-slider__stop",
style: ({
'left': item + '%'
})
}) : _vm._e()
})], 2)], 1)
},staticRenderFns: []}
/***/ }
/******/ });