fix(Rate): 修复type属性下color属性失效问题

DevCloudFE · Apr 26, 2022 · 6d6dcb3 · 6d6dcb3
1 parent fc5ad91
commit 6d6dcb3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/packages/devui-vue/devui/rate/__tests__/rate.spec.ts b/packages/devui-vue/devui/rate/__tests__/rate.spec.ts
@@ -30,6 +30,18 @@ describe('rate', () => {
       const container = wrapper.find('.devui-star-container');
       expect(container.exists()).toBeTruthy();
     });
+
+    it('Rate is color attributes should have content', async () => {
+      const _wrapper = mount(DRate, {
+        props: { modelValue: 2 },
+      });
+
+      await nextTick();
+      expect(_wrapper.find('.devui-star-color-').exists()).toBeTruthy();
+
+      await _wrapper.setProps({ color: 'red' });
+      expect(_wrapper.find('.devui-star-color-customize').exists()).toBeTruthy();
+    });
   });
 
   describe('rate change', () => {

diff --git a/packages/devui-vue/devui/rate/src/rate.scss b/packages/devui-vue/devui/rate/src/rate.scss
@@ -48,6 +48,14 @@
   }
 }
 
+.devui-star-color-customize {
+  color: var(--star-color);
+
+  svg g {
+    fill: var(--star-color);
+  }
+}
+
 .devui-active-star {
   position: absolute;
   top: 0;

diff --git a/packages/devui-vue/devui/rate/src/rate.tsx b/packages/devui-vue/devui/rate/src/rate.tsx
@@ -94,7 +94,7 @@ export default defineComponent({
     const { totalLevelArray, icon, character, read, type, color, hoverToggle, selectValue, onMouseleave } = this;
 
     return (
-      <div class="devui-star-container" onMouseleave={onMouseleave}>
+      <div class="devui-star-container" onMouseleave={onMouseleave} style={`--star-color: ${color}`}>
         {totalLevelArray.map((item, index) => (
           <div
             class={`devui-star-align devui-pointer ${read ? 'devui-only-read' : ''}`}
@@ -141,8 +141,12 @@ export default defineComponent({
             )}
             {!character && !icon && (
               <span
-                class={`devui-star-color-active devui-active-star devui-star-color-${type}`}
-                style={{ color: color, width: item.width }}>
+                class={[
+                  'devui-star-color-active',
+                  'devui-active-star',
+                  !color ? `devui-star-color-${type}` : 'devui-star-color-customize'
+                ]}
+                style={{ width: item.width }}>
                 <svg
                   width="16px"
                   height="16px"