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

slider - 增加step

Browse Source
This commit is contained in:
halo 2022-02-05 11:24:03 +08:00
parent f616820bd9
commit afeedaa399
2 changed files with 84 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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>