Rate组件源码比拟简略，有添加部份注释
main.vue
<template>
<!--valuenow当前的评分 valuetext当前显示的文本-->
<div
class="el-rate"
@keydown="handleKey"
role="slider"
:aria-valuenow="currentValue"
:aria-valuetext="text"
aria-valuemin="0"
:aria-valuemax="max"
tabindex="0">
<!--包裹每一个星的标签-->
<span
v-for="(item, key) in max"
class="el-rate__item"
@mousemove="setCurrentValue(item, $event)"
@mouseleave="resetCurrentValue"
@click="selectValue(item)"
:style="{ cursor: rateDisabled ? "auto" : "pointer" }"
:key="key">
<!--显示评星的标签-->
<i :class="[classes[item - 1], { "hover": hoverIndex === item }]"
class="el-rate__icon"
:style="getIconStyle(item)">
<!--这里重要是当评分涌现小数，显示左侧高亮的半星-->
<i v-if="showDecimalIcon(item)"
:class="decimalIconClass"
:style="decimalStyle"
class="el-rate__decimal">
</i>
</i>
</span>
<!--showText是不是显示帮助文字，若为真，则会从 texts 数组当选取当前分数对应的文字内容；showScore是不是显示当前分数，show-score 和 show-text 不能同时为真-->
<span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
</div>
</template>
<script>
import { hasClass } from "element-ui/src/utils/dom";
import Migrating from "element-ui/src/mixins/migrating";
export default {
name: "ElRate",
mixins: [Migrating],
//provider/inject：简略的来讲就是在父组件中通过provider来供给变量，然后在子组件中通过inject来注入变量。
inject: {
elForm: {
default: ""
}
},
data() {
return {
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: { //icon 的色彩数组，共有 3 个元素，为 3 个分段所对应的色彩
type: Array,
default() {
return ["#F7BA2A", "#F7BA2A", "#F7BA2A"];
}
},
voidColor: { //未选中 icon 的色彩
type: String,
default: "#C6D1DE"
},
disabledVoidColor: { //只读时未选中 icon 的色彩
type: String,
default: "#EFF2F7"
},
iconClasses: { //icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名
type: Array,
default() {
return ["el-icon-star-on", "el-icon-star-on", "el-icon-star-on"];
}
},
voidIconClass: { //未选中 icon 的类名
type: String,
default: "el-icon-star-off"
},
disabledVoidIconClass: { //只读时未选中 icon 的类名
type: String,
default: "el-icon-star-on"
},
disabled: { //是不是为只读
type: Boolean,
default: false
},
allowHalf: { //是不是许可半选
type: Boolean,
default: false
},
showText: { //是不是显示帮助文字，若为真，则会从 texts 数组当选取当前分数对应的文字内容
type: Boolean,
default: false
},
showScore: { //是不是显示当前分数，show-score 和 show-text 不能同时为真
type: Boolean,
default: false
},
textColor: { //帮助文字的色彩
type: String,
default: "#1f2d3d"
},
texts: { //帮助文字数组
type: Array,
default() {
return ["极差", "绝望", "一般", "满意", "欣喜"];
}
},
scoreTemplate: { //分数显示模板
type: String,
default: "{value}"
}
},
computed: {
text() {
let result = "";
//如果显示当前分数
if (this.showScore) {
//如果当前是只读状况，就显示v-model绑定的值，否则依据用户的评分显示值
result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
? this.value
: this.currentValue);
} else if (this.showText) { //如果显示帮助文字，则依据用户设置评分currentValue来显示texts数组中的文字
result = this.texts[Math.ceil(this.currentValue) - 1];
}
return result;
},
//高亮半星时添加的样式，色彩和宽度
decimalStyle() {
let width = "";
if (this.rateDisabled) {
//这里断定value的值是不是含有小数，有小数的则这里宽度为50%，为整数的话为0%
width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
}
if (this.allowHalf) {
width = "50%";
}
return {
color: this.activeColor,
width
};
},
valueDecimal() {
return this.value * 100 - Math.floor(this.value) * 100;
},
decimalIconClass() {
return this.getValueFromMap(this.value, this.classMap);
},
voidClass() {
return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
},
//依据currentValue的分所在的等级，返回对应的类名
activeClass() {
return this.getValueFromMap(this.currentValue, this.classMap);
},
colorMap() {
return {
lowColor: this.colors[0],
mediumColor: this.colors[1],
highColor: this.colors[2],
voidColor: this.voidColor,
disabledVoidColor: this.disabledVoidColor
};
},
//依据currentValue的分所在的等级，返回对应的色彩
activeColor() {
return this.getValueFromMap(this.currentValue, this.colorMap);
},
//这里重要是断定该星是选中还是未选中，分离参加选中和未选中icon类名
classes() {
let result = [];
let i = 0;
let 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;
},
classMap() {
return {
lowClass: this.iconClasses[0],
mediumClass: this.iconClasses[1],
highClass: this.iconClasses[2],
voidClass: this.voidIconClass,
disabledVoidClass: this.disabledVoidIconClass
};
},
rateDisabled() {
//是不是为只读，或父组件el-form中disabled的属性值，disabled是不是禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
return this.disabled || (this.elForm || {}).disabled;
}
},
watch: {
value(val) {
this.currentValue = val;
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
}
},
methods: {
getMigratingConfig() {
return {
props: {
"text-template": "text-template is renamed to score-template."
}
};
},
//断定当前value在属于低分、中等分、高分中的哪一个，依据不同等级返回不同的类名或色彩
getValueFromMap(value, map) {
let 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(item) {
//如果当前value包括小数，并且item - 1 < this.value <item, showWhenDisabled为true
let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
//这里重要也是断定是不是当前星是不是应显示半星
let showWhenAllowHalf = this.allowHalf &&
this.pointerAtLeftHalf &&
item - 0.5 <= this.currentValue &&
item > this.currentValue;
return showWhenDisabled || showWhenAllowHalf;
},
//返回当前星图标的色彩
getIconStyle(item) {
//voidColor的值是依据是不是只读来断定返回disabled-void-color或void-color
const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
return {
//断定当前星是显示高亮的色彩还是未选中时的色彩
color: item <= this.currentValue ? this.activeColor : voidColor
};
},
//点击时设置值
selectValue(value) {
if (this.rateDisabled) {
return;
}
//当可以显示半星时，这块传递的值为currentValue（鼠标移上去时会盘算是不是超过一半）
if (this.allowHalf && this.pointerAtLeftHalf) {
this.$emit("input", this.currentValue);
this.$emit("change", this.currentValue);
} else { //当不显示半星直接返回value
this.$emit("input", value);
this.$emit("change", value);
}
},
//当按键按下时所调用的办法
handleKey(e) {
//如果组件被禁用则按键事件无效
if (this.rateDisabled) {
return;
}
let currentValue = this.currentValue;
const keyCode = e.keyCode;
//当按高低左右键的时候，许可半选则在currentValue加或减0.5，不准可则加或减1
if (keyCode === 38 || keyCode === 39) { // up / right
if (this.allowHalf) {
currentValue += 0.5;
} else {
currentValue += 1;
}
e.stopPropagation();
e.preventDefault();
} else if (keyCode === 37 || keyCode === 40) { // left /down
if (this.allowHalf) {
currentValue -= 0.5;
} else {
currentValue -= 1;
}
e.stopPropagation();
e.preventDefault();
}
currentValue = currentValue < 0 ? 0 : currentValue;
currentValue = currentValue > this.max ? this.max : currentValue;
//将currentValue通过input传递给子组件绑定的v-model值，触发change事件，子组件可以change在获得转变后的值
this.$emit("input", currentValue);
this.$emit("change", currentValue);
},
//鼠标移动时转变评星的值
setCurrentValue(value, event) {
if (this.rateDisabled) {
return;
}
/* istanbul ignore if */
if (this.allowHalf) {
let target = event.target;
//鼠标移动到包裹星星图标的span标签时，获得到显示星的icon标签
if (hasClass(target, "el-rate__item")) {
target = target.querySelector(".el-rate__icon");
}
if (hasClass(target, "el-rate__decimal")) {
target = target.parentNode;
}
//依据鼠标移到一颗星的左侧一半之内的地位，则减去当前值的0.5，否则就是等于当前值
this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
} else {
//不准可半选时，鼠标移到那颗星就等于当前的值
this.currentValue = value;
}
//记载鼠标移动的地位
this.hoverIndex = value;
},
//鼠标移出时设置当前的值
resetCurrentValue() {
if (this.rateDisabled) {
return;
}
if (this.allowHalf) {
//如果当前的value是小数，pointerAtLeftHalf为true，如果是整数则为false,这里重要是为了点击时用来断定传哪一个值
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
}
//鼠标移上去时currentValue会转变，移走时currentValue等于之前的value
this.currentValue = this.value;
this.hoverIndex = -1;
}
},
created() {
if (!this.value) {
this.$emit("input", 0);
}
}
};
</script>
<template>
<!--v
