diff --git a/package/component/src/component/slider/Standard.vue b/package/component/src/component/slider/Standard.vue index be676e6f..fda4c11f 100644 --- a/package/component/src/component/slider/Standard.vue +++ b/package/component/src/component/slider/Standard.vue @@ -7,8 +7,9 @@ export default { diff --git a/package/component/src/component/slider/StandardRange.vue b/package/component/src/component/slider/StandardRange.vue index d56c39c7..a9172a7c 100644 --- a/package/component/src/component/slider/StandardRange.vue +++ b/package/component/src/component/slider/StandardRange.vue @@ -7,15 +7,16 @@ export default { diff --git a/package/component/src/component/slider/Vertical.vue b/package/component/src/component/slider/Vertical.vue index dc9aee10..421efcf9 100644 --- a/package/component/src/component/slider/Vertical.vue +++ b/package/component/src/component/slider/Vertical.vue @@ -16,6 +16,7 @@ interface Prop { step?: number; min?: number; max?: number; + showDots: boolean; } const props = withDefaults(defineProps(), { @@ -24,6 +25,7 @@ const props = withDefaults(defineProps(), { step: 0, min: 0, max: 100, + showDots: false, }); const moveAction = throttle(verticalMove); @@ -91,6 +93,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); +}; diff --git a/package/component/src/component/slider/VerticalRange.vue b/package/component/src/component/slider/VerticalRange.vue index 1ea4507c..ded3453a 100644 --- a/package/component/src/component/slider/VerticalRange.vue +++ b/package/component/src/component/slider/VerticalRange.vue @@ -7,15 +7,16 @@ export default { diff --git a/package/component/src/component/slider/index.less b/package/component/src/component/slider/index.less index ea5d51fb..3e9f6392 100644 --- a/package/component/src/component/slider/index.less +++ b/package/component/src/component/slider/index.less @@ -17,6 +17,7 @@ .layui-slider-btn-v { width: 12px; height: 12px; + // background-color: @global-back-color; background-color: white; position: absolute; border: 2px solid var(--global-primary-color); @@ -39,7 +40,7 @@ .layui-slider-line-v { width: 100%; height: 4px; - background-color: #eee; + background-color: #cccccc; position: absolute; top: 6px; } @@ -114,3 +115,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; +} \ No newline at end of file diff --git a/package/component/src/component/slider/index.vue b/package/component/src/component/slider/index.vue index ccd8acc2..c7e7d084 100644 --- a/package/component/src/component/slider/index.vue +++ b/package/component/src/component/slider/index.vue @@ -21,6 +21,7 @@ export interface LaySliderProps { disabled?: boolean; range?: boolean; rangeValue?: number[]; + showDots?: boolean } const emit = defineEmits(["update:modelValue"]); @@ -32,6 +33,7 @@ const props = withDefaults(defineProps(), { step: 0, min: 0, max: 100, + showDots: false }); let rangeValues: Ref | any = toRef(props, "rangeValue"); @@ -53,6 +55,7 @@ function valHook(val: any) { :rangeValue="rangeValues" :min="min" :max="max" + :showDots="showDots" />
@@ -64,6 +67,7 @@ function valHook(val: any) { :val="modelValue" :min="min" :max="max" + :showDots="showDots" />
@@ -77,6 +81,7 @@ function valHook(val: any) { :rangeValue="rangeValues" :min="min" :max="max" + :showDots="showDots" />
@@ -88,6 +93,7 @@ function valHook(val: any) { :step="step" :min="min" :max="max" + :showDots="showDots" >
diff --git a/package/component/src/component/slider/utils/index.ts b/package/component/src/component/slider/utils/index.ts index 400cd249..3495480b 100644 --- a/package/component/src/component/slider/utils/index.ts +++ b/package/component/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; +} diff --git a/package/document/src/document/zh-CN/components/slider.md b/package/document/src/document/zh-CN/components/slider.md index 124c5a2d..73ac2603 100644 --- a/package/document/src/document/zh-CN/components/slider.md +++ b/package/document/src/document/zh-CN/components/slider.md @@ -13,7 +13,7 @@ ::: demo 使用 `lay-slider` 标签, 创建滑块 @@ -37,7 +37,7 @@ export default { ::: demo