init
This commit is contained in:
130
src/component/slider/Standard.vue
Normal file
130
src/component/slider/Standard.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "StandardVue",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import { throttle, handle_select, makeDots } from "./utils/index";
|
||||
|
||||
export interface StandardProps {
|
||||
val?: number | Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<StandardProps>(), {
|
||||
disabled: false,
|
||||
val: 0,
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
showDots: false,
|
||||
});
|
||||
|
||||
const moveAction = throttle(standardMove);
|
||||
|
||||
function handle_mouseup() {
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
tooptipHide.value = true;
|
||||
}
|
||||
|
||||
function handle_mousedown() {
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
let standard_style: Ref<number> = ref<number>(props.val as number);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function standardMove(e: MouseEvent) {
|
||||
tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_left = tracker_rect.left;
|
||||
let point_left = e.clientX;
|
||||
let distance = point_left - origin_left;
|
||||
if (distance < props.min) {
|
||||
standard_style.value = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.width) * 100;
|
||||
calcWithStep(rate, standard_style);
|
||||
if (standard_style.value > props.max) {
|
||||
standard_style.value = props.max;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", standard_style.value);
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>
|
||||
) {
|
||||
if (typeof rate === "undefined") 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
const dots = makeDots(props);
|
||||
const focusDot = (val: number) => {
|
||||
emit("link-val-hook", val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="tracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
class="layui-slider-track-v"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
>
|
||||
<lay-tooltip :content="'' + val" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ left: val + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
:class="[disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div
|
||||
:style="{ width: val + '%' }"
|
||||
class="layui-slider-rate-v"
|
||||
: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>
|
||||
184
src/component/slider/StandardRange.vue
Normal file
184
src/component/slider/StandardRange.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "StandardRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import { throttle, makeDots } from "./utils/index";
|
||||
|
||||
export interface StandardRangeProps {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<StandardRangeProps>(), {
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
disabled: false,
|
||||
showDots: true,
|
||||
});
|
||||
|
||||
let rv = toRef(props, "rangeValue");
|
||||
|
||||
const moveAction = throttle(rangeMove);
|
||||
let currbtn = -1;
|
||||
|
||||
function handle_mousedown() {
|
||||
currbtn = -1;
|
||||
tooptipHide.value = false;
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
tooptipHide.value = true;
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
}
|
||||
function handle_select(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function rangeMove(e: MouseEvent) {
|
||||
// tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_left = tracker_rect.left;
|
||||
let point_left = e.clientX;
|
||||
let distance = point_left - origin_left;
|
||||
if (distance < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.width) * 100;
|
||||
let idx = -1;
|
||||
if (currbtn === -1) {
|
||||
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||||
idx = currbtn;
|
||||
} else {
|
||||
idx = currbtn;
|
||||
}
|
||||
|
||||
calcWithStep(rate, rv, idx);
|
||||
if (rv.value[1] > props.max) {
|
||||
rv.value[1] = props.max;
|
||||
}
|
||||
if (rv.value[0] < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", rv.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 {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>,
|
||||
idx: number = -1
|
||||
) {
|
||||
if (typeof rate === "undefined") return false;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
const dots = makeDots(props);
|
||||
|
||||
const focusDot = (item: number) => {
|
||||
let currbtn = moveNeighbors(item, rv);
|
||||
rv.value[currbtn] = item;
|
||||
emit("link-val-hook", rv.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="tracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
class="layui-slider-srange"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
>
|
||||
<lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ left: rv[0] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ left: rv[1] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
<div class="layui-slider-line-v"></div>
|
||||
<div
|
||||
:style="{
|
||||
width: rv[1] - rv[0] + '%',
|
||||
left: rv[0] + '%',
|
||||
}"
|
||||
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>
|
||||
146
src/component/slider/Vertical.vue
Normal file
146
src/component/slider/Vertical.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Vertical",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import { throttle } from "./utils/index";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
|
||||
export interface VerticalProps {
|
||||
val?: number | Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<VerticalProps>(), {
|
||||
disabled: true,
|
||||
val: 0,
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
showDots: false,
|
||||
});
|
||||
|
||||
const moveAction = throttle(verticalMove);
|
||||
|
||||
function handle_mouseup() {
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
tooptipHide.value = true;
|
||||
}
|
||||
function handle_select(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handle_mousedown() {
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
let vertical_style: Ref<number> = ref<number>(props.val as number);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function verticalMove(e: MouseEvent) {
|
||||
tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_bottom = tracker_rect.bottom;
|
||||
let point_bottom = e.clientY;
|
||||
let distance = (point_bottom - origin_bottom) * -1;
|
||||
if (distance < props.min) {
|
||||
vertical_style.value = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.height) * 100;
|
||||
calcWithStep(rate, vertical_style);
|
||||
if (vertical_style.value > props.max) {
|
||||
vertical_style.value = props.max;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", vertical_style.value);
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>
|
||||
) {
|
||||
if (typeof rate === "undefined") 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
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>
|
||||
<div class="layui-slider-vertical">
|
||||
<div
|
||||
@mousedown.stop="handle_mousedown"
|
||||
ref="tracker"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
class="layui-slider-vertical-track"
|
||||
>
|
||||
<lay-tooltip :content="'' + val" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ bottom: val + '%' }"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
class="layui-slider-vertical-btn"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div
|
||||
:style="{ height: val + '%' }"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
|
||||
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>
|
||||
186
src/component/slider/VerticalRange.vue
Normal file
186
src/component/slider/VerticalRange.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "VerticalRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import { throttle, makeDots } from "./utils/index";
|
||||
|
||||
export interface VerticalRangeProps {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<VerticalRangeProps>(), {
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
disabled: false,
|
||||
showDots: false,
|
||||
});
|
||||
|
||||
let rv = toRef(props, "rangeValue");
|
||||
|
||||
const moveAction = throttle(rangeMove);
|
||||
let currbtn = -1;
|
||||
function handle_mousedown() {
|
||||
currbtn = -1;
|
||||
tooptipHide.value = false;
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
tooptipHide.value = true;
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
}
|
||||
function handle_select(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function rangeMove(e: MouseEvent) {
|
||||
// tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_bottom = tracker_rect.bottom;
|
||||
let point_bottom = e.clientY;
|
||||
let distance = (point_bottom - origin_bottom) * -1;
|
||||
if (distance < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.height) * 100;
|
||||
let idx = -1;
|
||||
if (currbtn === -1) {
|
||||
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||||
idx = currbtn;
|
||||
} else {
|
||||
idx = currbtn;
|
||||
}
|
||||
|
||||
calcWithStep(rate, rv, idx);
|
||||
if (rv.value[1] > props.max) {
|
||||
rv.value[1] = props.max;
|
||||
}
|
||||
if (rv.value[0] < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", rv.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 {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>,
|
||||
idx: number = -1
|
||||
) {
|
||||
if (typeof rate === "undefined") return false;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
const dots = makeDots(props);
|
||||
|
||||
const focusDot = (item: number) => {
|
||||
let currbtn = moveNeighbors(item, rv);
|
||||
rv.value[currbtn] = item;
|
||||
emit("link-val-hook", rv.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-slider-vertical">
|
||||
<div
|
||||
ref="tracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
class="layui-slider-vrange"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
>
|
||||
<lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ bottom: rv[1] + '%' }"
|
||||
class="layui-slider-vertical-btn"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ bottom: rv[0] + '%' }"
|
||||
class="layui-slider-vertical-btn"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div class="layui-slider-vertical-line"></div>
|
||||
<div
|
||||
:style="{
|
||||
height: rv[1] - rv[0] + '%',
|
||||
bottom: rv[0] + '%',
|
||||
}"
|
||||
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>
|
||||
136
src/component/slider/index.less
Normal file
136
src/component/slider/index.less
Normal file
@@ -0,0 +1,136 @@
|
||||
@import "../popper/index.less";
|
||||
|
||||
.layui-slider-v {
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layui-slider-track-v {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.layui-slider-btn-v {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border: 2px solid var(--global-primary-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
left: 0%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.layui-slider-rate-v {
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
background-color: var(--global-primary-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layui-slider-line-v {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #cccccc;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
.layui-slider-disabled {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.layui-slider-disabled .disable-line {
|
||||
background-color: #c2c2c2 !important;
|
||||
}
|
||||
|
||||
.layui-slider-disabled .disable-btn {
|
||||
border: 2px solid #333333;
|
||||
}
|
||||
|
||||
.layui-slider-disabled-rate {
|
||||
background-color: var(--global-primary-color) !important;
|
||||
}
|
||||
|
||||
// 纵向样式
|
||||
.layui-slider-vertical {
|
||||
width: 18px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.layui-slider-vertical-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-slider-vertical-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border: 2px solid var(--global-primary-color);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
bottom: 0%;
|
||||
left: 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.layui-slider-vertical-rate {
|
||||
width: 4px;
|
||||
height: 30%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
background-color: var(--global-primary-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.layui-slider-vertical-line {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.layui-slider-srange {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-slider-vrange {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
5
src/component/slider/index.ts
Normal file
5
src/component/slider/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { withInstall, WithInstallType } from "../../utils";
|
||||
import Component from "./index.vue";
|
||||
|
||||
const component: WithInstallType<typeof Component> = withInstall(Component);
|
||||
export default component;
|
||||
101
src/component/slider/index.vue
Normal file
101
src/component/slider/index.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySlider",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { Ref, toRef } from "vue";
|
||||
import StandardVue from "./Standard.vue";
|
||||
import StandardRange from "./StandardRange.vue";
|
||||
import Vertical from "./Vertical.vue";
|
||||
import VerticalRange from "./VerticalRange.vue";
|
||||
|
||||
export interface SliderProps {
|
||||
vertical?: boolean;
|
||||
modelValue?: number | Array<number>;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
disabled?: boolean;
|
||||
range?: boolean;
|
||||
rangeValue?: number[];
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const props = withDefaults(defineProps<SliderProps>(), {
|
||||
vertical: false,
|
||||
modelValue: 0,
|
||||
disabled: false,
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
showDots: false,
|
||||
});
|
||||
|
||||
let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
|
||||
|
||||
function valHook(val: any) {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="vertical">
|
||||
<div v-if="range">
|
||||
<!-- 纵向区间 -->
|
||||
<VerticalRange
|
||||
:step="step"
|
||||
@linkValHook="valHook"
|
||||
:disabled="disabled"
|
||||
:rangeValue="rangeValues"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:showDots="showDots"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!-- 纵向 -->
|
||||
<Vertical
|
||||
:step="step"
|
||||
@linkValHook="valHook"
|
||||
:disabled="disabled"
|
||||
:val="modelValue"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:showDots="showDots"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="range">
|
||||
<!-- 横向区间 -->
|
||||
<StandardRange
|
||||
:step="step"
|
||||
@linkValHook="valHook"
|
||||
:disabled="disabled"
|
||||
:rangeValue="rangeValues"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:showDots="showDots"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<!-- 横向 -->
|
||||
<StandardVue
|
||||
:val="modelValue"
|
||||
@linkValHook="valHook"
|
||||
:disabled="disabled"
|
||||
:step="step"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:showDots="showDots"
|
||||
></StandardVue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
0
src/component/slider/interface.ts
Normal file
0
src/component/slider/interface.ts
Normal file
28
src/component/slider/utils/index.ts
Normal file
28
src/component/slider/utils/index.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
export function throttle(func: Function) {
|
||||
let timer: any = null;
|
||||
return function (args: any) {
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
func(args);
|
||||
}, 30);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user