From afeedaa399a9d070eac244a82f7d78b1dc44a188 Mon Sep 17 00:00:00 2001
From: halo <wlphp201303@163.com>
Date: Sat, 5 Feb 2022 11:24:03 +0800
Subject: [PATCH] =?UTF-8?q?slider=20-=20=E5=A2=9E=E5=8A=A0step?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/slider.md |   5 +-
 src/module/slider/index.vue             | 121 ++++++++++++++++--------
 2 files changed, 84 insertions(+), 42 deletions(-)

diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index b91b6671..e0d40b8b 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/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>
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index c94b17db..47e2265b 100644
--- a/src/module/slider/index.vue
+++ b/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.height = 0;
+    vertical_style.value = 0;
   } else {
     let rate = (distance / tracker_rect.height) * 100;
-    vertical_style.bottom = Math.floor(rate);
-    vertical_style.height = Math.floor(rate);
-    if (vertical_style.bottom > 100) {
-      vertical_style.bottom = 100;
-      vertical_style.height = 100;
+    calcWithStep(rate, vertical_style);
+    if (vertical_style.value > 100) {
+      vertical_style.value = 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);
-    rangeValue.value[idx] = Math.floor(rate);
+    let idx = -1;
+    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);
-    verticalRangeValue.value[idx] = Math.floor(rate);
+    let idx = -1;
+    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;
     }
@@ -288,7 +293,7 @@ const verticalRangeMove = (e: MouseEvent) => {
   emit("update:modelValue", verticalRangeValue.value);
 };
 
-function moveNeighbors(rate: number, rangeValues: any) {
+function moveNeighbors(rate: number, rangeValues: any) { 
   let d1 = Math.abs(rate - rangeValues.value[0]);
   let d2 = Math.abs(rate - rangeValues.value[1]);
   if (d1 > d2) {
@@ -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;
-  let r = rate - val.value;
-  if (Math.abs(r) < props.step) {
-    return false;
+
+  if (typeof val.value === "number") {
+    let r = rate - val.value;
+    if (Math.abs(r) < props.step) {
+      return false;
+    }
+
+    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 (r < 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>