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

slider组件

Browse Source
This commit is contained in:
wang 2021-12-17 20:52:45 +08:00
parent 81afabf411
commit 002de9dd9e
3 changed files with 210 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
::: demo ::: demo
<template> <template>
<lay-slider v-model="value"></lay-slider> <lay-slider v-model="value1"></lay-slider>
</template> </template>
<script> <script>
@ -9,9 +9,9 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const value = ref(50) const value1 = ref(50)
return { return {
value value1
} }
} }
} }
@ -22,7 +22,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-slider :vertical="vertical"></lay-slider> <lay-slider v-model="value2" :vertical="vertical"></lay-slider>
</template> </template>
<script> <script>
@ -32,9 +32,11 @@ export default {
setup() { setup() {
const vertical = ref(true) const vertical = ref(true)
const value2 = ref(10)
return { return {
vertical vertical,
value2
} }
} }
} }

128
src/module/slider/index.less
View File

@ -1,34 +1,102 @@
// 横向样式
.layui-slider-v { .layui-slider-v {
width: 100%; width: 100%;
height: 50px; height: 18px;
/* background-color: palevioletred; */ margin-bottom: 8px;
} }
.layui-slider-track-v { .layui-slider-track-v {
width: 100%; width: 100%;
height: 16px; height: 16px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
z-index: 30; z-index: 30;
} }
.layui-slider-btn-v { .layui-slider-btn-v {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: white; background-color: white;
position: absolute; position: absolute;
// top: -7px; // top: -7px;
border: 2px solid rgb(0, 150, 136); border: 2px solid rgb(0, 150, 136);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
left: 0%; left: 0%;
} z-index: 2;
}
// .layui-slider-btn-v:hover {
// width: 14px;
// height: 14px;
// background-color: white;
// position: absolute;
// top: -2px;
// border: 2px solid rgb(0, 150, 136);
// border-radius: 50%;
// cursor: pointer;
// left: 0%;
// }
.layui-slider-rate-v { .layui-slider-rate-v {
width: 0%; width: 0%;
height: 4px; height: 4px;
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 0; left: 0;
background-color: rgb(0, 150, 136); background-color: rgb(0, 150, 136);
} z-index: 1;
}
.layui-slider-line-v {
width: 100%;
height: 4px;
background-color: #eee;
position: absolute;
top: 6px;
}
// 纵向样式
.layui-slider-vertical {
width: 18px;
height: 200px;
// background-color: red;
}
.layui-slider-vertical-track {
width: 100%;
height: 100%;
// background-color: #eee;
position: relative;
}
.layui-slider-vertical-btn {
width: 12px;
height: 12px;
background-color: white;
position: absolute;
// top: -7px;
border: 2px solid rgb(0, 150, 136);
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: rgb(0, 150, 136);
z-index: 1;
}
.layui-slider-vertical-line {
width: 4px;
height: 100%;
position: absolute;
left: 7px;
background-color: #eee;
}

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

@ -1,89 +1,140 @@
<template> <template>
<div class="layui-slider layui-slider-vertical" style="height: 200px" v-if="vertical"> <div class="layui-slider-vertical" v-if="vertical">
<div class="layui-slider-tips"></div> <div
<div class="layui-slider-bar" style="background: #009688; height: 0%; bottom: 0"></div> ref="verticaltracker"
<div class="layui-slider-wrap" style="bottom: 0%"> @mousedown.stop="handle_mousedown"
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688"></div> class="layui-slider-vertical-track"
>
<div
:style="{ bottom: modelValue + '%' }"
class="layui-slider-vertical-btn"
></div>
<div :style="{ height: modelValue + '%' }" class="layui-slider-vertical-rate"></div>
<div class="layui-slider-vertical-line"></div>
</div> </div>
</div> </div>
<div class="layui-slider-v" v-else> <div class="layui-slider-v" v-else>
<div ref="tracker" @mousedown.stop="handle_mousedown" class="layui-slider-track-v"> <div
ref="standardtracker"
@mousedown.stop="handle_mousedown"
class="layui-slider-track-v"
>
<lay-tooltip :content="modelValue + ''"> <lay-tooltip :content="modelValue + ''">
<div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div> <div
:style="{ left: modelValue + '%' }"
class="layui-slider-btn-v"
></div>
</lay-tooltip> </lay-tooltip>
<div
<div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></div> :style="{ width: modelValue + '%' }"
class="layui-slider-rate-v"
></div>
<div class="layui-slider-line-v"></div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, reactive, ref } from 'vue' import { defineProps, reactive, ref } from "vue";
import { on, off } from 'evtd' import { on, off } from "evtd";
import './index.less' import "./index.less";
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
interface LaySliderProps { interface LaySliderProps {
vertical?: boolean, vertical?: boolean;
modelValue?: number, modelValue?: number;
min?: number, min?: number;
max?: number, max?: number;
step?: number;
} }
const props = withDefaults(defineProps<LaySliderProps>(), { const props = withDefaults(defineProps<LaySliderProps>(), {
vertical: false, vertical: false,
modelValue: 0, modelValue: 0,
}) });
const tracker = ref<HTMLElement | null>(null) const standardtracker = ref<HTMLElement | null>(null);
const style = reactive({ const verticaltracker = ref<HTMLElement | null>(null);
const standard_style = reactive({
left: props.modelValue, left: props.modelValue,
width: props.modelValue width: props.modelValue,
}) });
const vertical_style = reactive({
bottom: props.modelValue,
height: props.modelValue,
});
function handle_mousedown() { function handle_mousedown() {
on('selectstart', window, handle_select, { once: true }) on("selectstart", window, handle_select, { once: true });
on('mouseup', window, handle_mouseup) on("mouseup", window, handle_mouseup);
on('mousemove', window, handle_mousemove) on("mousemove", window, handle_mousemove);
} }
function handle_mousemove(e: MouseEvent) { function handle_mousemove(e: MouseEvent) {
if (!tracker.value) { if (props.vertical === false) {
return standardMove(e);
}
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 < 0) {
style.left = 0
style.width = 0
props.modelValue = 0
} else { } else {
let rate = (distance / tracker_rect.width) * 100 verticalMove(e);
style.left = Math.floor(rate)
style.width = Math.floor(rate)
props.modelValue = Math.floor(rate)
if (style.left > 100) {
style.left = 100
style.width = 100
props.modelValue = 100
}
} }
emit('update:modelValue', style.left)
} }
function handle_mouseup() { function handle_mouseup() {
// off('selectstart', document, handle_select) // off('selectstart', document, handle_select)
off('mouseup', window, handle_mouseup) off("mouseup", window, handle_mouseup);
off('mousemove', window, handle_mousemove) off("mousemove", window, handle_mousemove);
} }
function handle_select(e: Event): void { function handle_select(e: Event): void {
e.preventDefault() e.preventDefault();
} }
const standardMove = (e: MouseEvent) => {
if (!standardtracker.value) {
return;
}
let tracker_rect = standardtracker.value.getBoundingClientRect();
let origin_left = tracker_rect.left;
let point_left = e.clientX;
let distance = point_left - origin_left;
if (distance < 0) {
standard_style.left = 0;
standard_style.width = 0;
} else {
let rate = (distance / tracker_rect.width) * 100;
standard_style.left = Math.floor(rate);
standard_style.width = Math.floor(rate);
if (standard_style.left > 100) {
standard_style.left = 100;
standard_style.width = 100;
// props.modelValue = 100;
}
}
emit("update:modelValue", standard_style.left);
};
const verticalMove = (e: MouseEvent) => {
if (!verticaltracker.value) {
return;
}
let tracker_rect = verticaltracker.value.getBoundingClientRect();
let origin_bottom = tracker_rect.bottom;
let point_bottom = e.clientY;
let distance = (point_bottom - origin_bottom) * -1
if (distance < 0) {
vertical_style.bottom = 0;
vertical_style.height = 0;
} else {
let rate = (distance / tracker_rect.height) * 100;
console.log(rate)
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;
// props.modelValue = 100;
}
}
emit("update:modelValue", vertical_style.bottom);
};
</script> </script>