feat(rate): add icon and color props

b2nil · Dec 5, 2020 · 229d93e · 229d93e
1 parent e3f547e
commit 229d93e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/src/components/rate/index.ts b/src/components/rate/index.ts
@@ -25,19 +25,30 @@ const AtRate = defineComponent({
       type: Number,
       default: 5
     },
+    icon: {
+      type: String as PropType<AtRateProps['icon']>,
+      default: 'star'
+    },
+    color: String,
     onChange: Function as PropType<AtRateProps['onChange']>
   },
 
   setup(props: AtRateProps, { attrs, emit }) {
 
     const modelValue = useModelValue(props, emit, 'value')
 
-    const iconStyle = computed(() => ({
+    const iconClasses = computed(() => ({
+      'at-icon': true,
+      [`at-icon-${props.icon!}-2`]: true
+    }))
+
+    const iconMarginStyle = computed(() => ({
       marginRight: pxTransform(props.margin!)
     }))
 
-    const starIconStyle = computed(() => ({
-      fontSize: props.size ? `${props.size}px` : ''
+    const iconStyle = computed(() => (cls) => ({
+      fontSize: props.size ? `${props.size}px` : '',
+      color: props.color && cls.includes('at-rate__icon--on') ? props.color : ''
     }))
 
     // 生成星星颜色 className 数组，方便在jsx中直接map
@@ -74,21 +85,21 @@ const AtRate = defineComponent({
             h(View, {
               key: `at-rate-star-${i}`,
               class: cls,
-              style: iconStyle.value,
+              style: iconMarginStyle.value,
               onTap: handleClick.bind(this, i + 1)
             }, {
               default: () => [
                 h(Text, {
-                  class: 'at-icon at-icon-star-2',
-                  style: starIconStyle.value
+                  class: iconClasses.value,
+                  style: iconStyle.value(cls)
                 }),
                 h(View, {
                   class: 'at-rate__left'
                 }, {
                   default: () => [
                     h(Text, {
-                      class: 'at-icon at-icon-star-2',
-                      style: starIconStyle.value
+                      class: iconClasses.value,
+                      style: iconStyle.value(cls)
                     })
                   ]
                 })

diff --git a/src/pages/form/rate/index.vue b/src/pages/form/rate/index.vue
@@ -49,7 +49,29 @@
     <panel title="使用 vModel">
       <example-item>
         <at-rate
-          :style="{ color: 'blue' }"
+          :size="24"
+          :max="6"
+          v-model:value="rateValue5"
+        />
+      </example-item>
+    </panel>
+
+    <panel title="自定义图标颜色">
+      <example-item>
+        <at-rate
+          color="teal"
+          :size="24"
+          :max="6"
+          v-model:value="rateValue5"
+        />
+      </example-item>
+    </panel>
+
+    <panel title="自定义图标类型">
+      <example-item>
+        <at-rate
+          color="red"
+          icon="heart"
           :size="24"
           :max="6"
           v-model:value="rateValue5"

diff --git a/types/rate.d.ts b/types/rate.d.ts
@@ -23,6 +23,16 @@ export interface AtRateProps extends AtComponent {
    * @default 5
    */
   margin?: number
+  /**
+   * 图标类型，仅支持 'star' 和 'heart'
+   * @default 'star'
+   */
+  icon?: 'star' | 'heart'
+  /**
+   * 图标颜色
+   * @default '#FFCA3E'
+   */
+  color?: string
   /**
    * 输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，但不填写 onChange 函数时，该组件只读
    */