feat: 新增color属性 #472

DevCloudFE · Apr 16, 2022 · a9235e7 · a9235e7
1 parent fe40028
commit a9235e7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/packages/devui-vue/devui/slider/__tests__/slider.spec.ts b/packages/devui-vue/devui/slider/__tests__/slider.spec.ts
@@ -74,4 +74,14 @@ describe('d-slider', () => {
     const slider = wrapper.find('.devui-slider_popover-content');
     expect(slider.text()).toBe('10 bananas');
   });
+
+  it('slider color work', () => {
+    const wrapper = mount(DSlider, {
+      props: {
+        color: 'red'
+      }
+    });
+    expect(wrapper.find('.devui-slider__bar').attributes('style').includes('background-color: red')).toBeTruthy();
+    expect(wrapper.find('.devui-slider__button').attributes('style').includes('border-color: red')).toBeTruthy();
+  });
 });
diff --git a/packages/devui-vue/devui/slider/src/slider-types.ts b/packages/devui-vue/devui/slider/src/slider-types.ts
@@ -27,6 +27,10 @@ export const sliderProps = {
   tipsRenderer:{
     type: String,
     default: '',
+  },
+  color:{
+    type: String,
+    default: '',
   }
 } as const;
 export type SliderProps = ExtractPropTypes<typeof sliderProps>;
diff --git a/packages/devui-vue/devui/slider/src/slider.tsx b/packages/devui-vue/devui/slider/src/slider.tsx
@@ -156,6 +156,10 @@ export default defineComponent({
         </div>
       );
     };
+
+    const color = computed(() => {
+      return props.disabled ? '' : props.color;
+    });
     return () => (
       <div class='devui-slider'>
         {/* 整个的长度 */}
@@ -165,10 +169,10 @@ export default defineComponent({
           onMousedown={handleRunwayMousedown}
           onMouseout={() => (popoverShow.value = false)}>
           {/* 滑动后左边的进度条 */}
-          <div class={'devui-slider__bar' + disableClass.value} style={{ width: percentDispaly.value }}></div>
+          <div class={'devui-slider__bar' + disableClass.value} style={{ width: percentDispaly.value, backgroundColor: color.value }}></div>
           <div
             class={'devui-slider__button' + disableClass.value}
-            style={{ left: percentDispaly.value }}
+            style={{ left: percentDispaly.value, borderColor: color.value }}
             onMousedown={handleButtonMousedown}
             onMouseenter={() => (popoverShow.value = true)}
             onMouseout={() => (popoverShow.value = false)}></div>

diff --git a/packages/devui-vue/docs/components/slider/index.md b/packages/devui-vue/docs/components/slider/index.md
@@ -93,6 +93,31 @@ export default defineComponent({
 
 :::
 
+### 自定义颜色color
+
+:::demo
+
+```vue
+<template>
+  <div class="slider-wrapper" style="padding:20px">
+    <d-slider v-model="inputValue" color="#e67e22"></d-slider>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const inputValue = ref(20);
+    return {
+      inputValue,
+    };
+  },
+});
+</script>
+```
+
+:::
+
 ### 禁止输入态
 
 :::demo