refactor(rate): code upd

src/packages/rate/demo.vue

@@ -25,7 +25,7 @@
     <h2>只读状态</h2>
     <nut-rate v-model="state.val6" readonly></nut-rate>
 
-    <h2>绑定事件,{{ state.result }}</h2>
+    <h2>绑定事件</h2>
     <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
     <h2>自定义尺寸 35px</h2>
     <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
@@ -49,11 +49,9 @@ export default createDemo({
       val5: 3,
       val6: 3,
       val7: 3,
-      val8: 3,
-      result: ''
+      val8: 3
     });
     const onChange = val => {
-      state.result = '您点击了第' + val + '个!';
       ctx.$toast.text(state.result);
     };
     return {

src/packages/rate/doc.md

@@ -89,8 +89,8 @@ setup() {
 | count          | star 总数                                 | Number  | 5           |
 | v-model        | 当前 star 数，可使用 v-model 双向绑定数据 | Number  | -           |
 | icon-size      | star 大小                                 | Number  | 18          |
-| active-color   | 图标选中颜色                            | String  | #fa200c     |
-| void-color   | 图标未选中颜色                            | String  | #ccc     |
+| active-color   | 图标选中颜色                              | String  | #fa200c     |
+| void-color     | 图标未选中颜色                            | String  | #ccc        |
 | unchecked-icon | 使用图标(未选中)                          | String  | star-n      |
 | checked-icon   | 使用图标(选中)                            | String  | star-fill-n |
 | allow-half     | 是否半星                                  | Boolean | false       |

src/packages/rate/index.scss

@@ -10,10 +10,11 @@
 
     &__icon {
       color: $rate-icon-color;
-      &.disabled {
+      cursor: pointer;
+      &--disabled {
         color: $rate-icon-void-color;
       }
-      &.half {
+      &--half {
         position: absolute;
         width: 50%;
         left: 0;

src/packages/rate/index.vue

@@ -10,13 +10,13 @@
       <nut-icon
         :size="iconSize"
         class="nut-rate-item__icon"
-        :class="{ disabled: disabled || n > modelValue }"
+        :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
         :color="n <= modelValue ? activeColor : voidColor"
         :name="n <= modelValue ? checkedIcon : uncheckedIcon"
       />
       <nut-icon
         v-if="allowHalf && modelValue + 1 > n"
-        class="nut-rate-item__icon half"
+        class="nut-rate-item__icon nut-rate-item__icon--half"
         :color="n <= modelValue ? activeColor : voidColor"
         :size="iconSize"
         :name="checkedIcon"
@@ -95,7 +95,7 @@ export default create({
       } else {
         value = index;
         if (props.allowHalf) {
-          if ((e?.target as Element).className.includes('__icon half')) {
+          if ((e?.target as Element).className.includes('__icon--half')) {
             value -= 0.5;
           }
         }