refactor: rate优化

src/packages/rate/demo.vue

@@ -7,30 +7,34 @@
 
     <h2>自定义图标</h2>
     <div>
-      <nut-rate checkedIcon="heart-fill1" uncheckedIcon="heart"></nut-rate>
+      <nut-rate
+        checked-icon="heart-fill1"
+        unchecked-icon="heart"
+        v-model:value="state.val3"
+      ></nut-rate>
     </div>
 
     <h2>自定义数量</h2>
     <div>
-      <nut-rate :total="6"></nut-rate>
+      <nut-rate :total="6" v-model:value="state.val4"></nut-rate>
     </div>
 
     <h2>自定义颜色</h2>
     <div>
-      <nut-rate activeColor="#FFC800"></nut-rate>
+      <nut-rate active-color="#FFC800" v-model:value="state.val5"></nut-rate>
     </div>
 
     <h2>禁用状态</h2>
     <div>
-      <nut-rate :disabled="true"></nut-rate>
+      <nut-rate :disabled="true" v-model:value="state.val6"></nut-rate>
     </div>
 
     <h2>只读状态</h2>
     <div>
-      <nut-rate :value="2" :readOnly="true"></nut-rate>
+      <nut-rate :value="2" :read-only="true"></nut-rate>
     </div>
 
-    <h2>监听 change 事件</h2>
+    <h2>监听 change 事件,{{ state.result }}</h2>
     <div>
       <nut-rate @click="onClick"></nut-rate>
     </div>
@@ -45,9 +49,12 @@ export default createDemo({
   setup() {
     const state = reactive({
       val: 4,
-      val2: 2,
-      result: '',
-      result2: ''
+      val3: 3,
+      val4: 3,
+      val5: 3,
+      val6: 3,
+      val7: 3,
+      result: ''
     });
     const onClick = idx => {
       state.result = '您点击了第' + idx + '个!';

src/packages/rate/doc.md

@@ -68,12 +68,12 @@ app.use(Rate);
 | 字段 | 说明 | 类型 | 默认值
 | ----- | ----- | ----- | -----
 | total | star 总数 | Number | 5
-| value | 当前 star 数，可使用 v-model 双向绑定数据 | Number | 3
+| value | 当前 star 数，可使用 v-model 双向绑定数据 | Number | 0
 | size | star 大小 | Number | 25
 | spacing | 两个star的间距 | Number | 20
-| readOnly | 是否只读 | Boolean | false
-| uncheckedIcon | 使用图标(未选中) | String | -
-| checkedIcon | 使用图标(选中) | String | -
+| read-only | 是否只读 | Boolean | false
+| unchecked-icon | 使用图标(未选中) | String | -
+| checked-icon | 使用图标(选中) | String | -
 
 ## Event
 | 字段 | 说明 | 回调参数 

src/packages/rate/index.scss

@@ -19,13 +19,9 @@
     display: inline-block;
     vertical-align: bottom;
     margin-right: 15px;
-    // @include nut-rate-bg($primary-color);
     background-size: cover;
     &:last-child {
       margin-right: 0;
     }
-    // &.nut-rate-active {
-    //   @include nut-rate-active-bg($primary-color);
-    // }
   }
 }

src/packages/rate/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="nut-rate">
+  <view :class="classes">
     <view
       class="nut-rate-item"
-      :class="[{ 'nut-rate-active': n <= state.current }]"
+      :class="{ 'nut-rate-active': n <= state.current }"
       v-for="n in total"
       :key="n"
       @click="onClick($event, n)"
@@ -12,16 +12,15 @@
     >
       <nut-icon
         :size="size + 'px'"
-        :color="
-          n <= state.current ? (disabled ? '#CCCCCC' : activeColor) : '#CCCCCC'
-        "
+        :color="n <= state.current ? (disabled ? '#ccc' : activeColor) : '#ccc'"
         :name="n <= state.current ? checkedIcon : uncheckedIcon"
-      ></nut-icon>
+      >
+      </nut-icon>
     </view>
   </view>
 </template>
 <script lang="ts">
-import { toRefs, watch, reactive, inject } from 'vue';
+import { watch, reactive, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('rate');
 
@@ -33,7 +32,7 @@ export default create({
     },
     value: {
       type: [String, Number],
-      default: 3
+      default: 0
     },
     size: {
       type: [String, Number],
@@ -64,27 +63,33 @@ export default create({
       default: 20
     }
   },
-  setup(props, { emit, slots }) {
+  emits: ['update:value', 'click'],
+  setup(props, { emit }) {
     const state = reactive({
       current: props.value
     });
 
-    const onClick = (e: Event, idx) => {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const onClick = (e: Event, idx: number) => {
+      e.preventDefault();
       e.stopPropagation();
-      if (props.disabled) return;
-      if (props.readOnly) {
-        emit('update:value', state.current);
-        emit('click', state.current);
+      if (props.disabled || props.readOnly) return;
+
+      if (idx === 1 && state.current === idx) {
+        state.current = 0;
       } else {
-        if (state.current == idx) {
-          state.current = 0;
-        } else {
-          state.current = idx;
-        }
-        emit('update:value', state.current);
-        emit('click', state.current);
+        state.current = idx;
       }
+      emit('update:value', state.current);
+      emit('click', state.current);
     };
+
     watch(
       () => props.value,
       newVal => {
@@ -94,6 +99,7 @@ export default create({
 
     return {
       state,
+      classes,
       onClick
     };
   }