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

slider

Browse Source
This commit is contained in:
halo 2022-01-05 12:32:42 +08:00
parent 61325cad20
commit 7ba34dddb5
2 changed files with 146 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,95 +1,95 @@
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value1 = ref(50)
return {
value1
}
}
}
</script>
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value2 = ref(10)
return {
value2
}
}
}
</script>
:::
::: title 区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value3 = ref([20,50])
return {
value3
}
}
}
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([20,50])
return {
value4
}
}
}
</script>
:::
::: comment
:::
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value1 = ref(50)
return {
value1
}
}
}
</script>
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value2 = ref(10)
return {
value2
}
}
}
</script>
:::
::: title 区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value3 = ref([20,50])
return {
value3
}
}
}
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([23,56])
return {
value4
}
}
}
</script>
:::
::: comment
:::

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

@ -1,10 +1,27 @@
<template>
<div class="layui-slider-vertical" v-if="vertical">
<div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
<div class="layui-slider-vertical-btn"></div>
<div class="layui-slider-vertical-btn"></div>
<div
ref="rangetracker2"
@mousedown.stop="handle_mousedown"
class="layui-slider-vrange"
v-if="range"
>
<div
:style="{ bottom: verticalRangeValue[1] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div
:style="{ bottom: verticalRangeValue[0] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div class="layui-slider-vertical-line"></div>
<div class="layui-slider-vertical-rate"></div>
<div
:style="{
height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
bottom: verticalRangeValue[0] + '%',
}"
class="layui-slider-vertical-rate"
></div>
</div>
<div
@ -84,7 +101,7 @@
</div>
</template>
<script setup lang="ts">
import { defineProps, reactive, Ref, ref } from "vue";
import { defineProps, reactive, Ref, ref, toRef } from "vue";
import { on, off } from "evtd";
import "./index.less";
@ -98,6 +115,7 @@ interface LaySliderProps {
step?: number;
disabled?: boolean;
range?: boolean;
verticalrange?: number[];
}
const props = withDefaults(defineProps<LaySliderProps>(), {
@ -112,11 +130,7 @@ if (Array.isArray(props.modelValue)) {
rangeValue.value = props.modelValue;
}
let verticalRangeValue: Ref<number[]> = ref([0, 0]);
if (Array.isArray(props.modelValue)) {
// eslint-disable-next-line vue/no-setup-props-destructure
verticalRangeValue.value = props.modelValue;
}
let verticalRangeValue: any = toRef(props, "verticalrange");
const standardtracker = ref<HTMLElement | null>(null);
const verticaltracker = ref<HTMLElement | null>(null);
@ -227,7 +241,7 @@ const starndardRangeMove = (e: MouseEvent) => {
rangeValue.value[0] = 0;
} else {
let rate = (distance / tracker_rect.width) * 100;
let idx = moveNeighbor(Math.floor(rate));
let idx = moveNeighbors(Math.floor(rate), rangeValue);
rangeValue.value[idx] = Math.floor(rate);
if (rangeValue.value[1] > 100) {
rangeValue.value[1] = 100;
@ -239,12 +253,33 @@ const starndardRangeMove = (e: MouseEvent) => {
emit("update:modelValue", rangeValue.value);
};
const verticalRangeMove = (e: MouseEvent) => {};
function moveNeighbor(rate: number) {
let d1 = Math.abs(rate - rangeValue.value[0]);
let d2 = Math.abs(rate - rangeValue.value[1]);
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) {
rangeValue.value[0] = 0;
} else {
let rate = (distance / tracker_rect.height) * 100;
let idx = moveNeighbors(Math.floor(rate), verticalRangeValue);
verticalRangeValue.value[idx] = Math.floor(rate);
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 {