element-ui
Version:
A Component Library for Vue.js.
502 lines (440 loc) • 12.5 kB
JavaScript
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__(253);
/***/ },
/***/ 3:
/***/ function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
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
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context = context || (this.$vnode && this.$vnode.ssrContext)
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = injectStyles
}
if (hook) {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ },
/***/ 123:
/***/ function(module, exports) {
module.exports = require("element-ui/lib/utils/dom");
/***/ },
/***/ 253:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _main = __webpack_require__(254);
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;
/***/ },
/***/ 254:
/***/ function(module, exports, __webpack_require__) {
var Component = __webpack_require__(3)(
/* script */
__webpack_require__(255),
/* template */
__webpack_require__(256),
/* styles */
null,
/* scopeId */
null,
/* moduleIdentifier (server only) */
null
)
module.exports = Component.exports
/***/ },
/***/ 255:
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _dom = __webpack_require__(123);
exports.default = {
name: 'ElRate',
data: function data() {
return {
classMap: {},
colorMap: {},
pointerAtLeftHalf: true,
currentValue: this.value,
hoverIndex: -1
};
},
props: {
value: {
type: Number,
default: 0
},
lowThreshold: {
type: Number,
default: 2
},
highThreshold: {
type: Number,
default: 4
},
max: {
type: Number,
default: 5
},
colors: {
type: Array,
default: function _default() {
return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
}
},
voidColor: {
type: String,
default: '#C6D1DE'
},
disabledVoidColor: {
type: String,
default: '#EFF2F7'
},
iconClasses: {
type: Array,
default: function _default() {
return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
}
},
voidIconClass: {
type: String,
default: 'el-icon-star-off'
},
disabledVoidIconClass: {
type: String,
default: 'el-icon-star-on'
},
disabled: {
type: Boolean,
default: false
},
allowHalf: {
type: Boolean,
default: false
},
showText: {
type: Boolean,
default: false
},
textColor: {
type: String,
default: '#1f2d3d'
},
texts: {
type: Array,
default: function _default() {
return ['极差', '失望', '一般', '满意', '惊喜'];
}
},
textTemplate: {
type: String,
default: '{value}'
}
},
computed: {
text: function text() {
var result = '';
if (this.disabled) {
result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
} else {
result = this.texts[Math.ceil(this.currentValue) - 1];
}
return result;
},
decimalStyle: function decimalStyle() {
var width = '';
if (this.disabled) {
width = (this.valueDecimal < 50 ? 0 : 50) + '%';
}
if (this.allowHalf) {
width = '50%';
}
return {
color: this.activeColor,
width: width
};
},
valueDecimal: function valueDecimal() {
return this.value * 100 - Math.floor(this.value) * 100;
},
decimalIconClass: function decimalIconClass() {
return this.getValueFromMap(this.value, this.classMap);
},
voidClass: function voidClass() {
return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
},
activeClass: function activeClass() {
return this.getValueFromMap(this.currentValue, this.classMap);
},
activeColor: function activeColor() {
return this.getValueFromMap(this.currentValue, this.colorMap);
},
classes: function classes() {
var result = [];
var i = 0;
var threshold = this.currentValue;
if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
threshold--;
}
for (; i < threshold; i++) {
result.push(this.activeClass);
}
for (; i < this.max; i++) {
result.push(this.voidClass);
}
return result;
}
},
watch: {
value: function value(val) {
this.$emit('change', val);
this.currentValue = val;
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
}
},
methods: {
getValueFromMap: function getValueFromMap(value, map) {
var result = '';
if (value <= this.lowThreshold) {
result = map.lowColor || map.lowClass;
} else if (value >= this.highThreshold) {
result = map.highColor || map.highClass;
} else {
result = map.mediumColor || map.mediumClass;
}
return result;
},
showDecimalIcon: function showDecimalIcon(item) {
var showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
/* istanbul ignore next */
var showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && item - 0.5 <= this.currentValue && item > this.currentValue;
return showWhenDisabled || showWhenAllowHalf;
},
getIconStyle: function getIconStyle(item) {
var voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
return {
color: item <= this.currentValue ? this.activeColor : voidColor
};
},
selectValue: function selectValue(value) {
if (this.disabled) {
return;
}
if (this.allowHalf && this.pointerAtLeftHalf) {
this.$emit('input', this.currentValue);
} else {
this.$emit('input', value);
}
},
setCurrentValue: function setCurrentValue(value, event) {
if (this.disabled) {
return;
}
/* istanbul ignore if */
if (this.allowHalf) {
var target = event.target;
if ((0, _dom.hasClass)(target, 'el-rate__item')) {
target = target.querySelector('.el-rate__icon');
}
if ((0, _dom.hasClass)(target, 'el-rate__decimal')) {
target = target.parentNode;
}
this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
} else {
this.currentValue = value;
}
this.hoverIndex = value;
},
resetCurrentValue: function resetCurrentValue() {
if (this.disabled) {
return;
}
if (this.allowHalf) {
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
}
this.currentValue = this.value;
this.hoverIndex = -1;
}
},
created: function created() {
if (!this.value) {
this.$emit('input', 0);
}
this.classMap = {
lowClass: this.iconClasses[0],
mediumClass: this.iconClasses[1],
highClass: this.iconClasses[2],
voidClass: this.voidIconClass,
disabledVoidClass: this.disabledVoidIconClass
};
this.colorMap = {
lowColor: this.colors[0],
mediumColor: this.colors[1],
highColor: this.colors[2],
voidColor: this.voidColor,
disabledVoidColor: this.disabledVoidColor
};
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ },
/***/ 256:
/***/ 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-rate"
}, [_vm._l((_vm.max), function(item) {
return _c('span', {
staticClass: "el-rate__item",
style: ({
cursor: _vm.disabled ? 'auto' : 'pointer'
}),
on: {
"mousemove": function($event) {
_vm.setCurrentValue(item, $event)
},
"mouseleave": _vm.resetCurrentValue,
"click": function($event) {
_vm.selectValue(item)
}
}
}, [_c('i', {
staticClass: "el-rate__icon",
class: [_vm.classes[item - 1], {
'hover': _vm.hoverIndex === item
}],
style: (_vm.getIconStyle(item))
}, [(_vm.showDecimalIcon(item)) ? _c('i', {
staticClass: "el-rate__decimal",
class: _vm.decimalIconClass,
style: (_vm.decimalStyle)
}) : _vm._e()])])
}), (_vm.showText) ? _c('span', {
staticClass: "el-rate__text",
style: ({
color: _vm.textColor
})
}, [_vm._v(_vm._s(_vm.text))]) : _vm._e()], 2)
},staticRenderFns: []}
/***/ }
/******/ });