theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slider - 支持step，增加step计算逻辑

Browse Source
This commit is contained in:
halo 2022-01-23 20:59:33 +08:00
parent adaf72fc21
commit f616820bd9
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/docs/zh-CN/components/slider.md
View File

@ -7,7 +7,7 @@
::: demo ::: demo
<template> <template>
<lay-slider v-model="value1" :disabled="false"></lay-slider> <lay-slider :step="5" v-model="value1" :disabled="false"></lay-slider>
</template> </template>
<script> <script>

45
src/module/slider/index.vue
View File

@ -123,14 +123,10 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
vertical: false, vertical: false,
modelValue: 0, modelValue: 0,
disabled: false, disabled: false,
step: 1,
}); });
// let rangeValue: Ref<number[]> = ref([0, 0]);
let rangeValue: Ref<number[]> | any = toRef(props, "standardrange"); let rangeValue: Ref<number[]> | any = toRef(props, "standardrange");
// if (Array.isArray(props.modelValue)) {
// // eslint-disable-next-line vue/no-setup-props-destructure
// rangeValue.value = props.modelValue;
// }
let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange"); let verticalRangeValue: Ref<number[]> | any = toRef(props, "verticalrange");
@ -139,10 +135,10 @@ const verticaltracker = ref<HTMLElement | null>(null);
const rangetracker1 = ref<HTMLElement | null>(null); const rangetracker1 = ref<HTMLElement | null>(null);
const rangetracker2 = ref<HTMLElement | null>(null); const rangetracker2 = ref<HTMLElement | null>(null);
const standard_style = reactive({ // const standard_style = reactive({
left: props.modelValue, // left: props.modelValue,
width: props.modelValue, // width: props.modelValue,
}); // });
const vertical_style = reactive({ const vertical_style = reactive({
bottom: props.modelValue, bottom: props.modelValue,
@ -156,7 +152,7 @@ function throttle(func: Function) {
timer = setTimeout(() => { timer = setTimeout(() => {
timer = null; timer = null;
func(args); func(args);
}, 60); }, 50);
} }
}; };
} }
@ -199,6 +195,7 @@ function handle_mouseup() {
function handle_select(e: Event): void { function handle_select(e: Event): void {
e.preventDefault(); e.preventDefault();
} }
let standard_style: Ref<number> = ref<number>(props.modelValue as number);
const standardMove = (e: MouseEvent) => { const standardMove = (e: MouseEvent) => {
if (!standardtracker.value) { if (!standardtracker.value) {
@ -209,18 +206,16 @@ const standardMove = (e: MouseEvent) => {
let point_left = e.clientX; let point_left = e.clientX;
let distance = point_left - origin_left; let distance = point_left - origin_left;
if (distance < 0) { if (distance < 0) {
standard_style.left = 0; standard_style.value = 0;
standard_style.width = 0; // standard_style.width = 0;
} else { } else {
let rate = (distance / tracker_rect.width) * 100; let rate = (distance / tracker_rect.width) * 100;
standard_style.left = Math.floor(rate); calcWithStep(rate, standard_style);
standard_style.width = Math.floor(rate); if (standard_style.value > 100) {
if (standard_style.left > 100) { standard_style.value = 100;
standard_style.left = 100;
standard_style.width = 100;
} }
} }
emit("update:modelValue", standard_style.left); emit("update:modelValue", standard_style.value);
}; };
const verticalMove = (e: MouseEvent) => { const verticalMove = (e: MouseEvent) => {
if (!verticaltracker.value) { if (!verticaltracker.value) {
@ -302,4 +297,18 @@ function moveNeighbors(rate: number, rangeValues: any) {
return 0; return 0;
} }
} }
function calcWithStep(rate: number | undefined, val: Ref<number>) {
if (typeof rate === "undefined") return false;
let r = rate - val.value;
if (Math.abs(r) < props.step) {
return false;
}
if (r < 0) {
val.value -= props.step;
} else {
val.value += props.step;
}
}
</script> </script>