feat(slider - 增加断点 showdots): slider - 增加断点

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

@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-slider` 标签, 创建滑块
 
 <template>
-  <lay-slider :max="88" v-model="value1" :disabled="false"></lay-slider>
+  <lay-slider :showDots="true" :step="10" :max="100" v-model="value1" :disabled="false"></lay-slider>
   <lay-input-number v-model="value1"></lay-input-number>
 </template>
 
@@ -37,7 +37,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-slider v-model="value2" :vertical="true" :disabled="false"></lay-slider>
+  <lay-slider :showDots="false" :step="10" v-model="value2" :vertical="true" :disabled="false"></lay-slider>
 </template>
 
 <script>
@@ -63,7 +63,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-slider :disabled="false" :min="10" :max="80" v-model:rangeValue="value3" :range="true"></lay-slider>
+  <lay-slider :disabled="false" :min="0" :max="100" v-model:rangeValue="value3" :range="true"></lay-slider>
 </template>
 
 <script>
@@ -115,6 +115,7 @@ export default {
 | step  |  步长     | `Number`                   |        -       |    -    |
 | min  |  最小值     | `Number`                   |        -       |    -    |
 | max  |  最大值     | `Number`                   |        -       |    -    |
+| showDots  |  是否显示断点     | `Boolean`                   |        -       |    false    |
 :::
 
  

src/component/slider/Standard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
-import { throttle, handle_select } from "./utils/index";
+import { throttle, handle_select, makeDots } from "./utils/index";
 
 interface Prop {
   val?: number | Array<number>;
@@ -9,6 +9,7 @@ interface Prop {
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 const props = withDefaults(defineProps<Prop>(), {
   disabled: false,
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Prop>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false,
 });
 
 const moveAction = throttle(standardMove);
@@ -80,6 +82,15 @@ function calcWithStep(
     }
   }
 }
+// 断点
+const dots = makeDots(props);
+const focusDot = (val: number) => {
+  emit("link-val-hook", val);
+};
+// const focusClick = (e: MouseEvent)=>{
+//   console.log(e);
+//   standardMove(e)
+// }
 </script>
 
 <template>
@@ -103,5 +114,13 @@ function calcWithStep(
       :class="[disabled ? 'layui-slider-disabled disable-line' : '']"
     ></div>
     <div class="layui-slider-line-v"></div>
+    <div
+      v-show="showDots"
+      @click="focusDot(item)"
+      class="layui-slider-dots"
+      v-for="(item, index) in dots"
+      :key="index"
+      :style="{ left: item + '%' }"
+    ></div>
   </div>
 </template>

src/component/slider/StandardRange.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
-import { throttle } from "./utils/index";
+import { throttle, makeDots } from "./utils/index";
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Prop>(), {
   min: 0,
   max: 100,
   disabled: false,
+  showDots: true,
 });
 let rv = toRef(props, "rangeValue");
 
@@ -120,6 +122,15 @@ function cross(val: any) {
     currbtn = currbtn === 0 ? 1 : 0;
   }
 }
+// 断点
+const dots = makeDots(props);
+console.log(dots);
+
+const focusDot = (item: number) => {
+  let currbtn = moveNeighbors(item, rv);
+  rv.value[currbtn] = item;
+  emit("link-val-hook", rv.value);
+};
 </script>
 
 <template>
@@ -153,5 +164,13 @@ function cross(val: any) {
       class="layui-slider-rate-v"
       :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
     ></div>
+    <div
+      v-show="showDots"
+      @click="focusDot(item)"
+      class="layui-slider-dots"
+      v-for="(item, index) in dots"
+      :key="index"
+      :style="{ left: item + '%' }"
+    ></div>
   </div>
 </template>

src/component/slider/Vertical.vue

@@ -9,6 +9,7 @@ interface Prop {
   step?: number;
   min?: number;
   max?: number;
+  showDots: boolean;
 }
 const props = withDefaults(defineProps<Prop>(), {
   disabled: true,
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Prop>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false,
 });
 
 const moveAction = throttle(verticalMove);
@@ -83,6 +85,22 @@ function calcWithStep(
     }
   }
 }
+// 断点
+const makeDots = () => {
+  if (props.step === 0) return [];
+  let val = 0;
+  let dots = [];
+  let count = Math.floor(100 / props.step) - 1;
+  for (let i = 0; i < count; i++) {
+    val += props.step;
+    dots.push(val);
+  }
+  return dots;
+};
+const dots = makeDots();
+const focusDot = (val: number) => {
+  emit("link-val-hook", val);
+};
 </script>
 
 <template>
@@ -107,6 +125,14 @@ function calcWithStep(
         class="layui-slider-vertical-rate"
       ></div>
       <div class="layui-slider-vertical-line"></div>
+      <div
+        v-show="showDots"
+        @click="focusDot(item)"
+        class="layui-slider-vertical-dots"
+        v-for="(item, index) in dots"
+        :key="index"
+        :style="{ bottom: item + '%' }"
+      ></div>
     </div>
   </div>
 </template>

src/component/slider/VerticalRange.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
-import { throttle } from "./utils/index";
+import { throttle, makeDots } from "./utils/index";
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
   step?: number;
   min?: number;
   max?: number;
+  showDots?: boolean;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Prop>(), {
   min: 0,
   max: 100,
   disabled: false,
+  showDots: false,
 });
 
 let rv = toRef(props, "rangeValue");
@@ -120,6 +122,15 @@ function cross(val: any) {
     currbtn = currbtn === 0 ? 1 : 0;
   }
 }
+// 断点
+const dots = makeDots(props);
+console.log(dots);
+
+const focusDot = (item: number) => {
+  let currbtn = moveNeighbors(item, rv);
+  rv.value[currbtn] = item;
+  emit("link-val-hook", rv.value);
+};
 </script>
 
 <template>
@@ -155,6 +166,14 @@ function cross(val: any) {
         class="layui-slider-vertical-rate"
         :class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
       ></div>
+      <div
+        v-show="showDots"
+        @click="focusDot(item)"
+        class="layui-slider-vertical-dots"
+        v-for="(item, index) in dots"
+        :key="index"
+        :style="{ bottom: item + '%' }"
+      ></div>
     </div>
   </div>
 </template>

src/component/slider/index.less

@@ -18,7 +18,8 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: @global-back-color;
+  // background-color: @global-back-color;
+  background-color: white;
   position: absolute;
   border: 2px solid @global-primary-color;
   border-radius: 50%;
@@ -40,7 +41,7 @@
 .layui-slider-line-v {
   width: 100%;
   height: 4px;
-  background-color: #eee;
+  background-color: #cccccc;
   position: absolute;
   top: 6px;
 }
@@ -74,7 +75,8 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: @global-back-color;
+  // background-color: @global-back-color;
+  background-color: #ffffff;
   position: absolute;
   border: 2px solid @global-primary-color;
   border-radius: 50%;
@@ -115,3 +117,23 @@
   position: relative;
   cursor: pointer;
 }
+.layui-slider-dots {
+  margin-top: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  position: absolute;
+  top:0;
+  z-index: 1;
+}
+
+.layui-slider-vertical-dots {
+  width: 8px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 1;
+  margin-left: 5px;
+}

src/component/slider/index.vue

@@ -15,6 +15,7 @@ export interface LaySliderProps {
   disabled?: boolean;
   range?: boolean;
   rangeValue?: number[];
+  showDots?: boolean
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   step: 0,
   min: 0,
   max: 100,
+  showDots: false
 });
 
 let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
@@ -47,6 +49,7 @@ function valHook(val: any) {
           :rangeValue="rangeValues"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
       <div v-else>
@@ -58,6 +61,7 @@ function valHook(val: any) {
           :val="modelValue"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
     </div>
@@ -71,6 +75,7 @@ function valHook(val: any) {
           :rangeValue="rangeValues"
           :min="min"
           :max="max"
+          :showDots="showDots"
         />
       </div>
       <div v-else>
@@ -82,6 +87,7 @@ function valHook(val: any) {
           :step="step"
           :min="min"
           :max="max"
+          :showDots="showDots"
         ></StandardVue>
       </div>
     </div>

src/component/slider/utils/index.ts

@@ -13,3 +13,16 @@ export function throttle(func: Function) {
 export function handle_select(e: Event): void {
   e.preventDefault();
 }
+
+export function makeDots(props: any) {
+  if (props.step === 0) return [];
+  let val = 0;
+  let dots = [0];
+  let count = Math.floor(100 / props.step) - 1;
+  for (let i = 0; i < count; i++) {
+    val += props.step;
+    dots.push(val);
+  }
+  dots.push(100);
+  return dots;
+}