slider组件
This commit is contained in:
wang
parent
81afabf411
commit
002de9dd9e
@ -1,7 +1,7 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value"></lay-slider>
|
||||
<lay-slider v-model="value1"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -9,9 +9,9 @@ import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value = ref(50)
|
||||
const value1 = ref(50)
|
||||
return {
|
||||
value
|
||||
value1
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-slider :vertical="vertical"></lay-slider>
|
||||
<lay-slider v-model="value2" :vertical="vertical"></lay-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -32,9 +32,11 @@ export default {
|
||||
setup() {
|
||||
|
||||
const vertical = ref(true)
|
||||
const value2 = ref(10)
|
||||
|
||||
return {
|
||||
vertical
|
||||
vertical,
|
||||
value2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,102 @@
|
||||
// 横向样式
|
||||
.layui-slider-v {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
/* background-color: palevioletred; */
|
||||
}
|
||||
width: 100%;
|
||||
height: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layui-slider-track-v {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
}
|
||||
.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;
|
||||
// top: -7px;
|
||||
border: 2px solid rgb(0, 150, 136);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
left: 0%;
|
||||
}
|
||||
.layui-slider-btn-v {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
// top: -7px;
|
||||
border: 2px solid rgb(0, 150, 136);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
background-color: rgb(0, 150, 136);
|
||||
}
|
||||
.layui-slider-rate-v {
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,89 +1,140 @@
|
||||
<template>
|
||||
<div class="layui-slider layui-slider-vertical" style="height: 200px" v-if="vertical">
|
||||
<div class="layui-slider-tips"></div>
|
||||
<div class="layui-slider-bar" style="background: #009688; height: 0%; bottom: 0"></div>
|
||||
<div class="layui-slider-wrap" style="bottom: 0%">
|
||||
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688"></div>
|
||||
<div class="layui-slider-vertical" v-if="vertical">
|
||||
<div
|
||||
ref="verticaltracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
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 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 + ''">
|
||||
<div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div>
|
||||
<div
|
||||
:style="{ left: modelValue + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></div>
|
||||
<div
|
||||
:style="{ width: modelValue + '%' }"
|
||||
class="layui-slider-rate-v"
|
||||
></div>
|
||||
<div class="layui-slider-line-v"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, reactive, ref } from 'vue'
|
||||
import { on, off } from 'evtd'
|
||||
import './index.less'
|
||||
import { defineProps, reactive, ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import "./index.less";
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
interface LaySliderProps {
|
||||
vertical?: boolean,
|
||||
modelValue?: number,
|
||||
min?: number,
|
||||
max?: number,
|
||||
vertical?: boolean;
|
||||
modelValue?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySliderProps>(), {
|
||||
vertical: false,
|
||||
modelValue: 0,
|
||||
})
|
||||
});
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null)
|
||||
const style = reactive({
|
||||
const standardtracker = ref<HTMLElement | null>(null);
|
||||
const verticaltracker = ref<HTMLElement | null>(null);
|
||||
const standard_style = reactive({
|
||||
left: props.modelValue,
|
||||
width: props.modelValue
|
||||
})
|
||||
width: props.modelValue,
|
||||
});
|
||||
|
||||
const vertical_style = reactive({
|
||||
bottom: props.modelValue,
|
||||
height: props.modelValue,
|
||||
});
|
||||
|
||||
function handle_mousedown() {
|
||||
on('selectstart', window, handle_select, { once: true })
|
||||
on('mouseup', window, handle_mouseup)
|
||||
on('mousemove', window, handle_mousemove)
|
||||
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, handle_mousemove);
|
||||
}
|
||||
|
||||
function handle_mousemove(e: MouseEvent) {
|
||||
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 < 0) {
|
||||
style.left = 0
|
||||
style.width = 0
|
||||
props.modelValue = 0
|
||||
if (props.vertical === false) {
|
||||
standardMove(e);
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.width) * 100
|
||||
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
|
||||
}
|
||||
verticalMove(e);
|
||||
}
|
||||
emit('update:modelValue', style.left)
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
// off('selectstart', document, handle_select)
|
||||
off('mouseup', window, handle_mouseup)
|
||||
off('mousemove', window, handle_mousemove)
|
||||
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, handle_mousemove);
|
||||
}
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user