Rate: add show-score, fix change event timing

examples/docs/en-US/rate.md

@@ -128,15 +128,15 @@ You can use different icons to distinguish different rate components.
 
 Read-only Rate is for displaying rating score. Half star is supported.
 
-:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
+:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 
 ``` html
 <el-rate
   v-model="value5"
   disabled
-  show-text
+  show-score
   text-color="#ff9900"
-  text-template="{value} points">
+  score-template="{value} points">
 </el-rate>
 
 <script>
@@ -166,9 +166,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
+| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
 | text-color | color of texts | string | — | #1F2D3D |
 | texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | text template when the component is read-only | string | — | {value} |
+| score-template | score template | string | — | {value} |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/rate.md

@@ -123,14 +123,14 @@
 
 只读的评分用来展示分数，允许出现半星
 
-:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
+:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
 ``` html
 <el-rate
   v-model="value5"
   disabled
-  show-text
+  show-score
   text-color="#ff9900"
-  text-template="{value}">
+  score-template="{value}">
 </el-rate>
 
 <script>
@@ -159,10 +159,11 @@
 | icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
 | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
-| show-text | 是否显示辅助文字 | boolean | — | false |
+| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
+| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |
 | text-color | 辅助文字的颜色 | string | — | #1F2D3D |
 | texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | 只读时的辅助文字模板 | string | — | {value} |
+| score-template | 分数显示模板 | string | — | {value} |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

packages/rate/src/main.vue

@@ -19,7 +19,7 @@
         </i>
       </i>
     </span>
-    <span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
+    <span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
   </div>
 </template>
 
@@ -96,6 +96,10 @@
         type: Boolean,
         default: false
       },
+      showScore: {
+        type: Boolean,
+        default: false
+      },
       textColor: {
         type: String,
         default: '#1f2d3d'
@@ -106,7 +110,7 @@
           return ['极差', '失望', '一般', '满意', '惊喜'];
         }
       },
-      textTemplate: {
+      scoreTemplate: {
         type: String,
         default: '{value}'
       }
@@ -115,9 +119,11 @@
     computed: {
       text() {
         let result = '';
-        if (this.disabled) {
-          result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
-        } else {
+        if (this.showScore) {
+          result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.disabled
+            ? this.value
+            : this.currentValue);
+        } else if (this.showText) {
           result = this.texts[Math.ceil(this.currentValue) - 1];
         }
         return result;
@@ -176,7 +182,6 @@
 
     watch: {
       value(val) {
-        this.$emit('change', val);
         this.currentValue = val;
         this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
       }
@@ -218,8 +223,10 @@
         }
         if (this.allowHalf && this.pointerAtLeftHalf) {
           this.$emit('input', this.currentValue);
+          this.$emit('change', this.currentValue);
         } else {
           this.$emit('input', value);
+          this.$emit('change', value);
         }
       },