Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

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

@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-slider` 标签, 创建滑块
 
 <template>
-  <lay-slider v-model="value1" :disabled="false"></lay-slider>
+  <lay-slider :max="88" v-model="value1" :disabled="false"></lay-slider>
   <lay-input-number v-model="value1"></lay-input-number>
 </template>
 
@@ -63,7 +63,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-slider v-model:standardrange="value3" :range="true"></lay-slider>
+  <lay-slider :disabled="false" :min="10" :max="80" v-model:rangeValue="value3" :range="true"></lay-slider>
 </template>
 
 <script>
@@ -85,7 +85,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
+  <lay-slider v-model:rangeValue="value4" :range="true" :vertical="true" :disabled="false"></lay-slider>
 </template>
 
 <script>
@@ -111,10 +111,10 @@ export default {
 | v-model      | 选中值                | `Number`  |        -       |    -    |
 | vertical  |  是否垂直     | `Boolean`                   |        -       |    -    |
 | range  |  是否区间     | `Boolean`                   |        -       |    -    |
-| verticalrange  |  垂直区间值     | `Array`                   |        -       |    -    |
+| rangeValue  |  区间值     | `Array`                   |        -       |    -    |
-| standardrange  |  水平区间值     | `Array`                   |        -       |    -    |
 | step  |  步长     | `Number`                   |        -       |    -    |
-
+| min  |  最小值     | `Number`                   |        -       |    -    |
+| max  |  最大值     | `Number`                   |        -       |    -    |
 :::
 
 ::: comment

src/component/slider/Standard.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import { on, off } from "evtd";
+import { throttle, handle_select } from "./utils/index";
+
+interface Prop {
+  val?: number | Array<number>;
+  disabled?: boolean;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+const props = withDefaults(defineProps<Prop>(), {
+  disabled: false,
+  val: 0,
+  step: 0,
+  min: 0,
+  max: 100,
+});
+
+const moveAction = throttle(standardMove);
+
+function handle_mouseup() {
+  off("selectstart", document, handle_select);
+  off("mouseup", window, handle_mouseup);
+  off("mousemove", window, moveAction);
+  tooptipHide.value = true;
+}
+
+function handle_mousedown() {
+  on("selectstart", window, handle_select, { once: true });
+  on("mouseup", window, handle_mouseup);
+  on("mousemove", window, moveAction);
+}
+
+const tracker = ref<HTMLElement | null>(null);
+let standard_style: Ref<number> = ref<number>(props.val as number);
+const emit = defineEmits(["link-val-hook"]);
+const tooptipHide = ref<Boolean>(true);
+
+function standardMove(e: MouseEvent) {
+  tooptipHide.value = false;
+  if (!tracker.value) {
+    return;
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect();
+  let origin_left = tracker_rect.left;
+  let point_left = e.clientX;
+  let distance = point_left - origin_left;
+  if (distance < props.min) {
+    standard_style.value = props.min;
+  } else {
+    let rate = (distance / tracker_rect.width) * 100;
+    calcWithStep(rate, standard_style);
+    if (standard_style.value > props.max) {
+      standard_style.value = props.max;
+    }
+  }
+  emit("link-val-hook", standard_style.value);
+}
+
+function calcWithStep(
+  rate: number | undefined,
+  val: Ref<number> | Ref<number[]>
+) {
+  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 (props.step === 0) val.value = Math.floor(rate);
+
+    if (r < 0 && props.step !== 0) {
+      val.value -= props.step;
+    } else {
+      val.value += props.step;
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="tracker"
+    @mousedown.stop="handle_mousedown"
+    class="layui-slider-track-v"
+    :class="[disabled ? 'layui-slider-disabled' : '']"
+  >
+    <lay-tooltip :content="'' + val" :is-can-hide="tooptipHide">
+      <div
+        :style="{ left: val + '%' }"
+        class="layui-slider-btn-v"
+        :class="[disabled ? 'layui-slider-disabled disable-btn' : '']"
+      ></div>
+    </lay-tooltip>
+
+    <div
+      :style="{ width: val + '%' }"
+      class="layui-slider-rate-v"
+      :class="[disabled ? 'layui-slider-disabled disable-line' : '']"
+    ></div>
+    <div class="layui-slider-line-v"></div>
+  </div>
+</template>

src/component/slider/StandardRange.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, toRef, Ref } from "vue";
+import { on, off } from "evtd";
+import { throttle } from "./utils/index";
+interface Prop {
+  rangeValue: Array<number>;
+  disabled?: boolean;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+const props = withDefaults(defineProps<Prop>(), {
+  step: 0,
+  min: 0,
+  max: 100,
+  disabled: false,
+});
+let rv = toRef(props, "rangeValue");
+
+const moveAction = throttle(rangeMove);
+
+function handle_mousedown() {
+  on("selectstart", window, handle_select, { once: true });
+  on("mouseup", window, handle_mouseup);
+  on("mousemove", window, moveAction);
+}
+
+function handle_mouseup() {
+  tooptipHide.value = true;
+  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 tracker = ref<HTMLElement | null>(null);
+const emit = defineEmits(["link-val-hook"]);
+let currbtn = -1;
+const tooptipHide = ref<Boolean>(true);
+
+function rangeMove(e: MouseEvent) {
+  tooptipHide.value = false;
+  if (!tracker.value) {
+    return;
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect();
+  let origin_left = tracker_rect.left;
+  let point_left = e.clientX;
+  let distance = point_left - origin_left;
+  if (distance < props.min) {
+    rv.value[0] = props.min;
+  } else {
+    let rate = (distance / tracker_rect.width) * 100;
+    let idx = -1;
+    if (currbtn === -1) {
+      currbtn = moveNeighbors(Math.floor(rate), rv);
+      idx = currbtn;
+    } else {
+      idx = currbtn;
+    }
+
+    calcWithStep(rate, rv, idx);
+    if (rv.value[1] > props.max) {
+      rv.value[1] = props.max;
+    }
+    if (rv.value[0] < props.min) {
+      rv.value[0] = props.min;
+    }
+  }
+  emit("link-val-hook", rv.value);
+}
+
+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) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+function calcWithStep(
+  rate: number | undefined,
+  val: Ref<number> | Ref<number[]>,
+  idx: number = -1
+) {
+  if (typeof rate === "undefined") return false;
+
+  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>
+
+<template>
+  <div
+    ref="tracker"
+    @mousedown.stop="handle_mousedown"
+    class="layui-slider-srange"
+    :class="[disabled ? 'layui-slider-disabled' : '']"
+  >
+    <lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
+      <div
+        :style="{ left: rv[0] + '%' }"
+        class="layui-slider-btn-v"
+        :class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
+      ></div>
+    </lay-tooltip>
+
+    <lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
+      <div
+        :style="{ left: rv[1] + '%' }"
+        class="layui-slider-btn-v"
+        :class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
+      ></div>
+    </lay-tooltip>
+    <div class="layui-slider-line-v"></div>
+    <div
+      :style="{
+        width: rv[1] - rv[0] + '%',
+        left: rv[0] + '%',
+      }"
+      class="layui-slider-rate-v"
+      :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
+    ></div>
+  </div>
+</template>

src/component/slider/Vertical.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import { on, off } from "evtd";
+import { throttle } from "./utils/index";
+
+interface Prop {
+  val?: number | Array<number>;
+  disabled?: boolean;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+const props = withDefaults(defineProps<Prop>(), {
+  disabled: true,
+  val: 0,
+  step: 0,
+  min: 0,
+  max: 100,
+});
+
+const moveAction = throttle(verticalMove);
+
+function handle_mouseup() {
+  off("selectstart", document, handle_select);
+  off("mouseup", window, handle_mouseup);
+  off("mousemove", window, moveAction);
+  tooptipHide.value = true;
+}
+function handle_select(e: Event): void {
+  e.preventDefault();
+}
+
+function handle_mousedown() {
+  on("selectstart", window, handle_select, { once: true });
+  on("mouseup", window, handle_mouseup);
+  on("mousemove", window, moveAction);
+}
+
+const tracker = ref<HTMLElement | null>(null);
+let vertical_style: Ref<number> = ref<number>(props.val as number);
+const emit = defineEmits(["link-val-hook"]);
+const tooptipHide = ref<Boolean>(true);
+
+function verticalMove(e: MouseEvent) {
+  tooptipHide.value = false;
+  if (!tracker.value) {
+    return;
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect();
+  let origin_bottom = tracker_rect.bottom;
+  let point_bottom = e.clientY;
+  let distance = (point_bottom - origin_bottom) * -1;
+  if (distance < props.min) {
+    vertical_style.value = props.min;
+  } else {
+    let rate = (distance / tracker_rect.height) * 100;
+    calcWithStep(rate, vertical_style);
+    if (vertical_style.value > props.max) {
+      vertical_style.value = props.max;
+    }
+  }
+  emit("link-val-hook", vertical_style.value);
+}
+
+function calcWithStep(
+  rate: number | undefined,
+  val: Ref<number> | Ref<number[]>
+) {
+  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 (props.step === 0) val.value = Math.floor(rate);
+
+    if (r < 0 && props.step !== 0) {
+      val.value -= props.step;
+    } else {
+      val.value += props.step;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="layui-slider-vertical">
+    <div
+      @mousedown.stop="handle_mousedown"
+      ref="tracker"
+      :class="[disabled ? 'layui-slider-disabled' : '']"
+      class="layui-slider-vertical-track"
+    >
+      <lay-tooltip :content="'' + val" :is-can-hide="tooptipHide">
+        <div
+          :style="{ bottom: val + '%' }"
+          :class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
+          class="layui-slider-vertical-btn"
+        ></div>
+      </lay-tooltip>
+
+      <div
+        :style="{ height: val + '%' }"
+        :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
+        class="layui-slider-vertical-rate"
+      ></div>
+      <div class="layui-slider-vertical-line"></div>
+    </div>
+  </div>
+</template>

src/component/slider/VerticalRange.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, toRef, Ref } from "vue";
+import { on, off } from "evtd";
+import { throttle } from "./utils/index";
+interface Prop {
+  rangeValue: Array<number>;
+  disabled?: boolean;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+const props = withDefaults(defineProps<Prop>(), {
+  step: 0,
+  min: 0,
+  max: 100,
+  disabled: false,
+});
+
+let rv = toRef(props, "rangeValue");
+
+const moveAction = throttle(rangeMove);
+
+function handle_mousedown() {
+  on("selectstart", window, handle_select, { once: true });
+  on("mouseup", window, handle_mouseup);
+  on("mousemove", window, moveAction);
+}
+
+function handle_mouseup() {
+  tooptipHide.value = true;
+  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 tracker = ref<HTMLElement | null>(null);
+const emit = defineEmits(["link-val-hook"]);
+let currbtn = -1;
+const tooptipHide = ref<Boolean>(true);
+
+function rangeMove(e: MouseEvent) {
+  tooptipHide.value = false;
+  if (!tracker.value) {
+    return;
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect();
+  let origin_bottom = tracker_rect.bottom;
+  let point_bottom = e.clientY;
+  let distance = (point_bottom - origin_bottom) * -1;
+  if (distance < props.min) {
+    rv.value[0] = props.min;
+  } else {
+    let rate = (distance / tracker_rect.height) * 100;
+    let idx = -1;
+    if (currbtn === -1) {
+      currbtn = moveNeighbors(Math.floor(rate), rv);
+      idx = currbtn;
+    } else {
+      idx = currbtn;
+    }
+
+    calcWithStep(rate, rv, idx);
+    if (rv.value[1] > props.max) {
+      rv.value[1] = props.max;
+    }
+    if (rv.value[0] < props.min) {
+      rv.value[0] = props.min;
+    }
+  }
+  emit("link-val-hook", rv.value);
+}
+
+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) {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+function calcWithStep(
+  rate: number | undefined,
+  val: Ref<number> | Ref<number[]>,
+  idx: number = -1
+) {
+  if (typeof rate === "undefined") return false;
+
+  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>
+
+<template>
+  <div class="layui-slider-vertical">
+    <div
+      ref="tracker"
+      @mousedown.stop="handle_mousedown"
+      class="layui-slider-vrange"
+      :class="[disabled ? 'layui-slider-disabled' : '']"
+    >
+      <lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
+        <div
+          :style="{ bottom: rv[1] + '%' }"
+          class="layui-slider-vertical-btn"
+          :class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
+        ></div>
+      </lay-tooltip>
+
+      <lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
+        <div
+          :style="{ bottom: rv[0] + '%' }"
+          class="layui-slider-vertical-btn"
+          :class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
+        ></div>
+      </lay-tooltip>
+
+      <div class="layui-slider-vertical-line"></div>
+      <div
+        :style="{
+          height: rv[1] - rv[0] + '%',
+          bottom: rv[0] + '%',
+        }"
+        class="layui-slider-vertical-rate"
+        :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
+      ></div>
+    </div>
+  </div>
+</template>

src/component/slider/index.less

@@ -47,6 +47,14 @@
 .layui-slider-disabled {
   cursor: not-allowed !important;
 }
+.layui-slider-disabled .disable-line {
+  background-color: #c2c2c2 !important;
+}
+
+.layui-slider-disabled .disable-btn {
+  border: 2px solid #333333;
+}
+
 .layui-slider-disabled-rate {
   background-color: @global-primary-color !important;
 }

src/component/slider/index.vue

@@ -1,121 +1,10 @@
-<template>
-  <div class="layui-slider-vertical" v-if="vertical">
-    <div
-      ref="rangetracker2"
-      @mousedown.stop="handle_mousedown"
-      class="layui-slider-vrange"
-      v-if="range"
-    >
-      <lay-tooltip
-        :content="'' + verticalRangeValue[1]"
-        :is-can-hide="tooptipHide"
-      >
-        <div
-          :style="{ bottom: verticalRangeValue[1] + '%' }"
-          class="layui-slider-vertical-btn"
-        ></div>
-      </lay-tooltip>
-      <lay-tooltip
-        :content="'' + verticalRangeValue[0]"
-        :is-can-hide="tooptipHide"
-      >
-        <div
-          :style="{ bottom: verticalRangeValue[0] + '%' }"
-          class="layui-slider-vertical-btn"
-        ></div>
-      </lay-tooltip>
-
-      <div class="layui-slider-vertical-line"></div>
-      <div
-        :style="{
-          height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
-          bottom: verticalRangeValue[0] + '%',
-        }"
-        class="layui-slider-vertical-rate"
-      ></div>
-    </div>
-
-    <div
-      ref="verticaltracker"
-      @mousedown.stop="handle_mousedown"
-      class="layui-slider-vertical-track"
-      :class="[props.disabled ? 'layui-slider-disabled' : '']"
-      v-else
-    >
-      <lay-tooltip :content="modelValue + ''" :is-can-hide="tooptipHide">
-        <div
-          :style="{ bottom: modelValue + '%' }"
-          class="layui-slider-vertical-btn"
-          :class="[props.disabled ? 'layui-slider-disabled' : '']"
-        ></div>
-      </lay-tooltip>
-      <div
-        :style="{ height: modelValue + '%' }"
-        class="layui-slider-vertical-rate"
-        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
-      ></div>
-      <div class="layui-slider-vertical-line"></div>
-    </div>
-  </div>
-
-  <div class="layui-slider-v" v-else>
-    <div
-      @mousedown.stop="handle_mousedown"
-      ref="rangetracker1"
-      class="layui-slider-srange"
-      v-if="range"
-    >
-      <lay-tooltip :content="rangeValue[0] + ''" :is-can-hide="tooptipHide">
-        <div
-          :style="{ left: rangeValue[0] + '%' }"
-          class="layui-slider-btn-v"
-        ></div>
-      </lay-tooltip>
-      <lay-tooltip :content="rangeValue[1] + ''" :is-can-hide="tooptipHide">
-        <div
-          :style="{ left: rangeValue[1] + '%' }"
-          class="layui-slider-btn-v"
-        ></div>
-      </lay-tooltip>
-
-      <div class="layui-slider-line-v"></div>
-      <div
-        :style="{
-          width: rangeValue[1] - rangeValue[0] + '%',
-          left: rangeValue[0] + '%',
-        }"
-        class="layui-slider-rate-v"
-      ></div>
-    </div>
-
-    <div
-      ref="standardtracker"
-      @mousedown.stop="handle_mousedown"
-      class="layui-slider-track-v"
-      :class="[props.disabled ? 'layui-slider-disabled' : '']"
-      v-else
-    >
-      <lay-tooltip :content="'' + modelValue" :is-can-hide="tooptipHide">
-        <div
-          :style="{ left: modelValue + '%' }"
-          class="layui-slider-btn-v"
-          :class="[props.disabled ? 'layui-slider-disabled' : '']"
-        ></div>
-      </lay-tooltip>
-      <div
-        :style="{ width: modelValue + '%' }"
-        class="layui-slider-rate-v"
-        :class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
-      ></div>
-      <div class="layui-slider-line-v"></div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { Ref, ref, toRef } from "vue";
+import { Ref, toRef } from "vue";
-import { on, off } from "evtd";
 import "./index.less";
+import StandardVue from "./Standard.vue";
+import StandardRange from "./StandardRange.vue";
+import Vertical from "./Vertical.vue";
+import VerticalRange from "./VerticalRange.vue";
 
 export interface LaySliderProps {
   vertical?: boolean;
@@ -125,8 +14,7 @@ export interface LaySliderProps {
   step?: number;
   disabled?: boolean;
   range?: boolean;
-  verticalrange?: number[];
+  rangeValue?: number[];
-  standardrange?: number[];
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -136,235 +24,66 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   modelValue: 0,
   disabled: false,
   step: 0,
+  min: 0,
+  max: 100,
 });
 
-let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
+let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
 
-let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
+function valHook(val: any) {
-
+  emit("update:modelValue", val);
-const rangetracker1 = ref<HTMLElement | null>(null);
-const rangetracker2 = ref<HTMLElement | null>(null);
-
-function throttle(func: Function) {
-  let timer: any = null;
-  return function (args: any) {
-    if (!timer) {
-      timer = setTimeout(() => {
-        timer = null;
-        func(args);
-      }, 20);
-    }
-  };
-}
-const moveAction = throttle(handle_mousemove);
-
-const tooptipHide = ref<Boolean>(true);
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function handle_mousedown() {
-  on("selectstart", window, handle_select, { once: true });
-  on("mouseup", window, handle_mouseup);
-  on("mousemove", window, moveAction);
-}
-
-function handle_mousemove(e: MouseEvent) {
-  tooptipHide.value = false;
-  if (props.disabled === true) {
-    return false;
-  }
-  if (props.vertical === false && props.range === false) {
-    standardMove(e);
-  }
-
-  if (props.vertical === true && props.range === false) {
-    verticalMove(e);
-  }
-
-  if (props.vertical === false && props.range === true) {
-    starndardRangeMove(e);
-  }
-
-  if (props.vertical === true && props.range === true) {
-    verticalRangeMove(e);
-  }
-}
-
-let currbtn = -1;
-
-function handle_mouseup() {
-  // off('selectstart', document, handle_select)
-  off("mouseup", window, handle_mouseup);
-  off("mousemove", window, moveAction);
-  tooptipHide.value = true;
-  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) => {
-  if (!standardtracker.value) {
-    return;
-  }
-  let tracker_rect = standardtracker.value.getBoundingClientRect();
-  let origin_left = tracker_rect.left;
-  let point_left = e.clientX;
-  let distance = point_left - origin_left;
-  if (distance < 0) {
-    standard_style.value = 0;
-  } else {
-    let rate = (distance / tracker_rect.width) * 100;
-    calcWithStep(rate, standard_style);
-    if (standard_style.value > 100) {
-      standard_style.value = 100;
-    }
-  }
-  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;
-  }
-  let tracker_rect = verticaltracker.value.getBoundingClientRect();
-  let origin_bottom = tracker_rect.bottom;
-  let point_bottom = e.clientY;
-  let distance = (point_bottom - origin_bottom) * -1;
-  if (distance < 0) {
-    vertical_style.value = 0;
-  } else {
-    let rate = (distance / tracker_rect.height) * 100;
-    calcWithStep(rate, vertical_style);
-    if (vertical_style.value > 100) {
-      vertical_style.value = 100;
-    }
-  }
-  emit("update:modelValue", vertical_style.value);
-};
-
-const starndardRangeMove = (e: MouseEvent) => {
-  if (!rangetracker1.value) {
-    return;
-  }
-  let tracker_rect = rangetracker1.value.getBoundingClientRect();
-  let origin_left = tracker_rect.left;
-  let point_left = e.clientX;
-  let distance = point_left - origin_left;
-  if (distance < 0) {
-    rangeValue.value[0] = 0;
-  } else {
-    let rate = (distance / tracker_rect.width) * 100;
-    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;
-    }
-    if (rangeValue.value[0] < 0) {
-      rangeValue.value[0] = 0;
-    }
-  }
-  emit("update:modelValue", rangeValue.value);
-};
-
-const verticalRangeMove = (e: MouseEvent) => {
-  if (!rangetracker2.value) {
-    return;
-  }
-  let tracker_rect = rangetracker2.value.getBoundingClientRect();
-  let origin_bottom = tracker_rect.bottom;
-  let point_bottom = e.clientY;
-  let distance = (point_bottom - origin_bottom) * -1;
-  if (distance < 0) {
-    verticalRangeValue.value[0] = 0;
-  } else {
-    let rate = (distance / tracker_rect.height) * 100;
-    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;
-    }
-    if (verticalRangeValue.value[0] < 0) {
-      verticalRangeValue.value[0] = 0;
-    }
-  }
-  emit("update:modelValue", verticalRangeValue.value);
-};
-
-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) {
-    return 1;
-  } else {
-    return 0;
-  }
-}
-
-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 (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>
+
+<template>
+  <div>
+    <div v-if="vertical">
+      <div v-if="range">
+        <!-- 纵向区间 -->
+        <VerticalRange
+          :step="10"
+          @linkValHook="valHook"
+          :disabled="disabled"
+          :rangeValue="rangeValues"
+          :min="min"
+          :max="max"
+        />
+      </div>
+      <div v-else>
+        <!-- 纵向 -->
+        <Vertical
+          :step="step"
+          @linkValHook="valHook"
+          :disabled="disabled"
+          :val="modelValue"
+          :min="min"
+          :max="max"
+        />
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="range">
+        <!-- 横向区间 -->
+        <StandardRange
+          :step="10"
+          @linkValHook="valHook"
+          :disabled="disabled"
+          :rangeValue="rangeValues"
+          :min="min"
+          :max="max"
+        />
+      </div>
+      <div v-else>
+        <!-- 横向 -->
+        <StandardVue
+          :val="modelValue"
+          @linkValHook="valHook"
+          :disabled="disabled"
+          :step="step"
+          :min="min"
+          :max="max"
+        ></StandardVue>
+      </div>
+    </div>
+  </div>
+</template>

src/component/slider/utils/index.ts

@@ -0,0 +1,17 @@
+export function throttle(func: Function) {
+  let timer: any = null;
+  return function (args: any) {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        func(args);
+      }, 20);
+    }
+  };
+}
+
+export function handle_select(e: Event): void {
+  e.preventDefault();
+}
+
+