slider - 增加step

example/docs/zh-CN/components/slider.md

@@ -7,7 +7,8 @@
 ::: demo
 
 <template>
-  <lay-slider :step="5" v-model="value1" :disabled="false"></lay-slider>
+  <lay-slider v-model="value1" :disabled="false"></lay-slider>
+  <lay-input-number v-model="value1"></lay-input-number>
 </template>
 
 <script>
@@ -30,7 +31,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
+  <lay-slider v-model="value2" :vertical="true" :disabled="false"></lay-slider>
 </template>
 
 <script>

src/module/slider/index.vue

@@ -60,7 +60,7 @@
           class="layui-slider-btn-v"
         ></div>
       </lay-tooltip>
-      <lay-tooltip :content="rangeValue[1]">
+      <lay-tooltip :content="rangeValue[1] + ''">
         <div
           :style="{ left: rangeValue[1] + '%' }"
           class="layui-slider-btn-v"
@@ -84,7 +84,7 @@
       :class="[props.disabled ? 'layui-slider-disabled' : '']"
       v-else
     >
-      <lay-tooltip :content="modelValue + ''">
+      <lay-tooltip :visible="true" :content="'' + modelValue">
         <div
           :style="{ left: modelValue + '%' }"
           class="layui-slider-btn-v"
@@ -101,7 +101,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, reactive, Ref, ref, toRef } from "vue";
+import { defineProps, Ref, ref, toRef } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
@@ -123,28 +123,16 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   vertical: false,
   modelValue: 0,
   disabled: false,
-  step: 1,
+  step: 0,
 });
 
 let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
 
 let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
 
-const standardtracker = ref<HTMLElement | null>(null);
-const verticaltracker = ref<HTMLElement | null>(null);
 const rangetracker1 = ref<HTMLElement | null>(null);
 const rangetracker2 = ref<HTMLElement | null>(null);
 
-// const standard_style = reactive({
-//   left: props.modelValue,
-//   width: props.modelValue,
-// });
-
-const vertical_style = reactive({
-  bottom: props.modelValue,
-  height: props.modelValue,
-});
-
 function throttle(func: Function) {
   let timer: any = null;
   return function (args: any) {
@@ -152,7 +140,7 @@ function throttle(func: Function) {
       timer = setTimeout(() => {
         timer = null;
         func(args);
-      }, 50);
+      }, 20);
     }
   };
 }
@@ -186,15 +174,19 @@ function handle_mousemove(e: MouseEvent) {
   }
 }
 
+let currbtn = -1;
+
 function handle_mouseup() {
   // off('selectstart', document, handle_select)
   off("mouseup", window, handle_mouseup);
   off("mousemove", window, moveAction);
+  currbtn = -1;
 }
 
 function handle_select(e: Event): void {
   e.preventDefault();
 }
+const standardtracker = ref<HTMLElement | null>(null);
 let standard_style: Ref<number> = ref<number>(props.modelValue as number);
 
 const standardMove = (e: MouseEvent) => {
@@ -207,7 +199,6 @@ const standardMove = (e: MouseEvent) => {
   let distance = point_left - origin_left;
   if (distance < 0) {
     standard_style.value = 0;
-    // standard_style.width = 0;
   } else {
     let rate = (distance / tracker_rect.width) * 100;
     calcWithStep(rate, standard_style);
@@ -217,6 +208,10 @@ const standardMove = (e: MouseEvent) => {
   }
   emit("update:modelValue", standard_style.value);
 };
+
+const verticaltracker = ref<HTMLElement | null>(null);
+let vertical_style: Ref<number> = ref<number>(props.modelValue as number);
+
 const verticalMove = (e: MouseEvent) => {
   if (!verticaltracker.value) {
     return;
@@ -226,18 +221,15 @@ const verticalMove = (e: MouseEvent) => {
   let point_bottom = e.clientY;
   let distance = (point_bottom - origin_bottom) * -1;
   if (distance < 0) {
-    vertical_style.bottom = 0;
+    vertical_style.value = 0;
-    vertical_style.height = 0;
   } else {
     let rate = (distance / tracker_rect.height) * 100;
-    vertical_style.bottom = Math.floor(rate);
+    calcWithStep(rate, vertical_style);
-    vertical_style.height = Math.floor(rate);
+    if (vertical_style.value > 100) {
-    if (vertical_style.bottom > 100) {
+      vertical_style.value = 100;
-      vertical_style.bottom = 100;
-      vertical_style.height = 100;
     }
   }
-  emit("update:modelValue", vertical_style.bottom);
+  emit("update:modelValue", vertical_style.value);
 };
 
 const starndardRangeMove = (e: MouseEvent) => {
@@ -252,8 +244,15 @@ const starndardRangeMove = (e: MouseEvent) => {
     rangeValue.value[0] = 0;
   } else {
     let rate = (distance / tracker_rect.width) * 100;
-    let idx = moveNeighbors(Math.floor(rate), rangeValue);
+    let idx = -1;
-    rangeValue.value[idx] = Math.floor(rate);
+    if (currbtn === -1) {
+      currbtn = moveNeighbors(Math.floor(rate), rangeValue);
+      idx = currbtn;
+    } else {
+      idx = currbtn;
+    }
+
+    calcWithStep(rate, rangeValue, idx);
     if (rangeValue.value[1] > 100) {
       rangeValue.value[1] = 100;
     }
@@ -273,11 +272,17 @@ const verticalRangeMove = (e: MouseEvent) => {
   let point_bottom = e.clientY;
   let distance = (point_bottom - origin_bottom) * -1;
   if (distance < 0) {
-    rangeValue.value[0] = 0;
+    verticalRangeValue.value[0] = 0;
   } else {
     let rate = (distance / tracker_rect.height) * 100;
-    let idx = moveNeighbors(Math.floor(rate), verticalRangeValue);
+    let idx = -1;
-    verticalRangeValue.value[idx] = Math.floor(rate);
+    if (currbtn === -1) {
+      currbtn = moveNeighbors(Math.floor(rate), verticalRangeValue);
+      idx = currbtn;
+    } else {
+      idx = currbtn;
+    }
+    calcWithStep(rate, verticalRangeValue, idx);
     if (verticalRangeValue.value[1] > 100) {
       verticalRangeValue.value[1] = 100;
     }
@@ -298,17 +303,53 @@ function moveNeighbors(rate: number, rangeValues: any) {
   }
 }
 
-function calcWithStep(rate: number | undefined, val: Ref<number>) {
+function calcWithStep(
+  rate: number | undefined,
+  val: Ref<number> | Ref<number[]>,
+  idx: number = -1
+) {
   if (typeof rate === "undefined") return false;
+
+  if (typeof val.value === "number") {
     let r = rate - val.value;
     if (Math.abs(r) < props.step) {
       return false;
     }
 
-  if (r < 0) {
+    if (props.step === 0) val.value = Math.floor(rate);
+
+    if (r < 0 && props.step !== 0) {
       val.value -= props.step;
     } else {
       val.value += props.step;
     }
   }
+
+  if (typeof val.value === "object") {
+    let r = rate - val.value[idx];
+    if (Math.abs(r) < props.step) {
+      return false;
+    }
+
+    if (props.step === 0) val.value[idx] = Math.floor(rate);
+    
+    if (Array.isArray(val.value)) {
+      if (r < 0 && props.step !== 0) {
+        val.value[idx] -= props.step;
+      } else {
+        val.value[idx] += props.step;
+      }
+      cross(val);
+    }
+  }
+}
+
+function cross(val: any) {
+  if (val.value[0] > val.value[1]) {
+    let tmp = val.value[0];
+    val.value[0] = val.value[1];
+    val.value[1] = tmp;
+    currbtn = currbtn === 0 ? 1 : 0;
+  }
+}
 </script>