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:56:10 +08:00
parent 1a7cd1b33f
commit 63d1e7538d
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,11 +5,16 @@
@mousedown.stop="handle_mousedown" @mousedown.stop="handle_mousedown"
class="layui-slider-vertical-track" class="layui-slider-vertical-track"
> >
<lay-tooltip :content="modelValue + ''">
<div
:style="{ bottom: modelValue + '%' }"
class="layui-slider-vertical-btn"
></div>
</lay-tooltip>
<div <div
:style="{ bottom: modelValue + '%' }" :style="{ height: modelValue + '%' }"
class="layui-slider-vertical-btn" class="layui-slider-vertical-rate"
></div> ></div>
<div :style="{ height: modelValue + '%' }" class="layui-slider-vertical-rate"></div>
<div class="layui-slider-vertical-line"></div> <div class="layui-slider-vertical-line"></div>
</div> </div>
</div> </div>
@ -120,13 +125,13 @@ const verticalMove = (e: MouseEvent) => {
let tracker_rect = verticaltracker.value.getBoundingClientRect(); let tracker_rect = verticaltracker.value.getBoundingClientRect();
let origin_bottom = tracker_rect.bottom; let origin_bottom = tracker_rect.bottom;
let point_bottom = e.clientY; let point_bottom = e.clientY;
let distance = (point_bottom - origin_bottom) * -1 let distance = (point_bottom - origin_bottom) * -1;
if (distance < 0) { if (distance < 0) {
vertical_style.bottom = 0; vertical_style.bottom = 0;
vertical_style.height = 0; vertical_style.height = 0;
} else { } else {
let rate = (distance / tracker_rect.height) * 100; let rate = (distance / tracker_rect.height) * 100;
console.log(rate) console.log(rate);
vertical_style.bottom = Math.floor(rate); vertical_style.bottom = Math.floor(rate);
vertical_style.height = Math.floor(rate); vertical_style.height = Math.floor(rate);
if (vertical_style.bottom > 100) { if (vertical_style.bottom > 100) {