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

Author: Lonely-shang

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', () => {

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;

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"