style: rang

src/config.json

@@ -353,7 +353,7 @@
           "cName": "下拉刷新",
           "desc": "下拉刷新",
           "sort": 16,
-          "show": true,
+          "show": false,
           "author": "yangxiaolu3"
         },
         {

src/packages/range/demo.vue

@@ -75,7 +75,7 @@ export default createDemo({
       value9: 60,
       value10: 50
     });
-    const onChange = value => Toast.text('当前值：' + value);
+    const onChange = (value: number) => Toast.text('当前值：' + value);
     return {
       ...toRefs(state),
       onChange

src/packages/range/doc.md

@@ -117,24 +117,23 @@ export default {
   
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 当前进度百分比 | _number \| number[]_ | `0` |
-| range | 是否开启双滑块模式 | _boolean_ | `false` |
-| max | 最大值 | _number \| string_ | `100` |
-| min | 最小值 | _number \| string_ | `0` |
-| step | 步长 | _number \| string_ | `1` |
-| disabled | 是否禁用滑块 | _boolean_ | `false` |
-| hidden-range | 是否隐藏范围值 | _boolean_ | `false` |
-| hidden-tag | 是否隐藏标签 | _boolean_ | `false` |
-| active-color | 进度条激活态颜色 | _string_ | `rgba(250, 44, 25, 1)` |
-| inactive-color | 进度条非激活态颜色 | _string_ | `rgba(255, 163, 154, 1)` |
-| button-color | 按钮颜色 | _string_ | `rgba(250, 44, 25, 1)` |
+| v-model | 当前进度百分比 | Number、Number[] | `0` |
+| range | 是否开启双滑块模式 | Boolean | `false` |
+| max | 最大值 | Number、String | `100` |
+| min | 最小值 | Number、String | `0` |
+| step | 步长 | Number、String | `1` |
+| disabled | 是否禁用滑块 | Boolean | `false` |
+| hidden-range | 是否隐藏范围值 | Boolean | `false` |
+| hidden-tag | 是否隐藏标签 | Boolean | `false` |
+| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
 
   
 ### Events
 
 | 事件名             | 说明                     | 回调参数        |
 | ------------------ | ------------------------ | --------------- |
-| update:model-value | 进度变化时实时触发       | value: 当前进度 |
 | change             | 进度变化且结束拖动后触发 | value: 当前进度 |
 | drag-start         | 开始拖动时触发           | -               |
 | drag-end           | 结束拖动时触发           | -               |

src/packages/range/index.scss

@@ -6,8 +6,8 @@
   align-items: center;
   .min,
   .max {
-    font-size: 12px;
-    color: rgba(51, 51, 51, 1);
+    font-size: $font-size-1;
+    color: $range-max;
     user-select: none;
   }
 }
@@ -16,7 +16,7 @@
   position: relative;
   width: 100%;
   height: 3px;
-  background-color: rgba(255, 163, 154, 1);
+  background-color: $rang-bg-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
@@ -33,13 +33,7 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-      135deg,
-      rgba(250, 44, 25, 1) 0%,
-      rgba(250, 63, 25, 1) 45%,
-      rgba(250, 89, 25, 1) 83%,
-      rgba(250, 100, 25, 1) 100%
-    );
+    background: $rang-bar-bg-color;
     border-radius: inherit;
     transition: all 0.2s;
   }
@@ -48,10 +42,10 @@
     display: block;
     width: 24px;
     height: 24px;
-    background-color: #fff;
+    background-color: $white;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(250, 44, 25, 1);
+    border: 1px solid $primary-color;
     outline: none;
 
     &-wrapper,
@@ -80,8 +74,8 @@
       align-items: center;
       justify-content: center;
       user-select: none;
-      font-size: 12px;
-      color: rgba(51, 51, 51, 1);
+      font-size: $font-size-1;
+      color: $range-max;
       transform: translate3d(0, -100%, 0);
     }
   }

src/packages/range/index.vue

@@ -124,8 +124,6 @@ export default create({
   emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    console.log(slots.button && slots.button());
-
     const buttonIndex = ref(0);
     let startValue: SliderValue;
     let currentValue: SliderValue;
@@ -134,7 +132,6 @@ export default create({
     const dragStatus = ref<'start' | 'draging' | ''>();
     const touch = useTouch();
 
-    // 滑动范围计算
     const scope = computed(() => Number(props.max) - Number(props.min));
 
     const classes = computed(() => {
@@ -146,49 +143,37 @@ export default create({
       };
     });
 
-    // 滑轨样式
     const wrapperStyle = computed(() => {
       return {
         background: props.inactiveColor
       };
     });
 
-    // 按钮样式
     const buttonStyle = computed(() => {
       return {
         borderColor: props.buttonColor
       };
     });
 
-    // 判断是否是双滑块
     const isRange = (val: unknown): val is number[] =>
       !!props.range && Array.isArray(val);
 
-    // 组件核心：拖动效果主要是通过计算选中条长度百分比、开始位置偏移量来实现
-    // 计算选中条的长度百分比
     const calcMainAxis = () => {
       const { modelValue, min } = props;
-      // 双滑块时，拖动滑块，通过实时变化滑动条的宽度，间接让滑块移动
-      // 如果拖动右滑块，则只会改变滑动条的宽度，开始位置偏移量不会变化
       if (isRange(modelValue)) {
         return `${((modelValue[1] - modelValue[0]) * 100) / scope.value}%`;
       }
-      // 单滑块时，通过实时变化滑动条宽度，来让滑块移动
       return `${((modelValue - Number(min)) * 100) / scope.value}%`;
     };
 
-    // 计算选中条的开始位置的偏移量
     const calcOffset = () => {
       const { modelValue, min } = props;
-      // 双滑块时，如果拖动左滑块，则不仅会改变滑动条宽度，还要改变滑动条的开始位置
       if (isRange(modelValue)) {
         return `${((modelValue[0] - Number(min)) * 100) / scope.value}%`;
       }
-      // 单滑块时，开始位置永远是最左侧
       return `0%`;
     };
 
-    // 选中条样式
     const barStyle = computed<CSSProperties>(() => {
       return {
         width: calcMainAxis(),
@@ -200,15 +185,13 @@ export default create({
 
     const format = (value: number) => {
       const { min, max, step } = props;
-      value = Math.max(+min, Math.min(value, +max)); // 拖动范围限制
-      return Math.round(value / +step) * +step; // 每一步四舍五入
+      value = Math.max(+min, Math.min(value, +max));
+      return Math.round(value / +step) * +step;
     };
 
     const isSameValue = (newValue: SliderValue, oldValue: SliderValue) =>
       JSON.stringify(newValue) === JSON.stringify(oldValue);
 
-    // 处理两个滑块交错之后的情况
-    // 例如左滑块移动到右滑块右边，这个时候需要将两个滑块值进行交换
     const handleOverlap = (value: number[]) => {
       if (value[0] > value[1]) {
         return value.slice(0).reverse();
@@ -245,8 +228,6 @@ export default create({
       if (isRange(modelValue)) {
         const [left, right] = modelValue;
         const middle = (left + right) / 2;
-
-        // 靠左边点击移动左按钮，靠右边点击移动右按钮
         if (value <= middle) {
           updateValue([value, right], true);
         } else {
@@ -311,11 +292,11 @@ export default create({
       dragStatus.value = '';
     };
 
-    const curValue = (idx?) => {
+    const curValue = (idx?: number) => {
       const value =
         typeof idx === 'number'
           ? (props.modelValue as number[])[idx]
-          : (props.modelValue as number);
+          : props.modelValue;
       return value;
     };
 

src/styles/variables.scss

@@ -226,6 +226,17 @@ $tabbar-border-color: #eee;
 
 $infinite-bottom-color: #c8c8c8;
 
+//range
+$range-max: #333333;
+$rang-bg-color: #ffa39a;
+$rang-bar-bg-color: linear-gradient(
+  135deg,
+  rgba(250, 44, 25, 1) 0%,
+  rgba(250, 63, 25, 1) 45%,
+  rgba(250, 89, 25, 1) 83%,
+  rgba(250, 100, 25, 1) 100%
+);
+
 view-block {
   display: block;
 }