🐛(component): 修复 slider 组件 btn 背景色
This commit is contained in:
就眠儀式
parent
46de17edcb
commit
afc3de03c7
@ -1,3 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "StandardVue"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, ref } from "vue";
|
import { Ref, ref } from "vue";
|
||||||
import { on, off } from "evtd";
|
import { on, off } from "evtd";
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "StandardRange"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRef, Ref } from "vue";
|
import { ref, toRef, Ref } from "vue";
|
||||||
import { on, off } from "evtd";
|
import { on, off } from "evtd";
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "Vertical"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, ref } from "vue";
|
import { Ref, ref } from "vue";
|
||||||
import { on, off } from "evtd";
|
import { on, off } from "evtd";
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "VerticalRange"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRef, Ref } from "vue";
|
import { ref, toRef, Ref } from "vue";
|
||||||
import { on, off } from "evtd";
|
import { on, off } from "evtd";
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
.layui-slider-btn-v {
|
.layui-slider-btn-v {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
background-color: var(--global-back-color);
|
background-color: white;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid var(--global-primary-color);
|
border: 2px solid var(--global-primary-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -73,7 +73,7 @@
|
|||||||
.layui-slider-vertical-btn {
|
.layui-slider-vertical-btn {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
background-color: var(--global-back-color);
|
background-color: white;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid var(--global-primary-color);
|
border: 2px solid var(--global-primary-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "LaySlider"
|
name: "LaySlider",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
@ -1,169 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="sliderVerify" class="slider-item">
|
|
||||||
<div class="slider-bg layui-bg-green"></div>
|
|
||||||
<div class="slider-text">
|
|
||||||
{{ prototype.isOk == false ? prototype.text : prototype.success }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="
|
|
||||||
prototype.isOk == false
|
|
||||||
? 'slider-btn layui-icon layui-icon-next'
|
|
||||||
: 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'
|
|
||||||
"
|
|
||||||
@mousedown.stop="down"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref, defineProps } from "vue";
|
|
||||||
import { on, off } from "evtd";
|
|
||||||
import { throttle, handle_select } from "./utils/index";
|
|
||||||
|
|
||||||
interface Prop {
|
|
||||||
disabled?: boolean;
|
|
||||||
bg?: string;
|
|
||||||
text?: string;
|
|
||||||
end?: string;
|
|
||||||
success?: Function;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Prop>(), {
|
|
||||||
disabled: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
//默认配置
|
|
||||||
const prototype = reactive({
|
|
||||||
isOk: false,
|
|
||||||
bg: props.bg, //默认滑块颜色
|
|
||||||
text: props.text ? props.text : "请拖动滑块验证",
|
|
||||||
success: props.end ? props.end : "验证通过",
|
|
||||||
ok: props.success,
|
|
||||||
});
|
|
||||||
|
|
||||||
//是否为移动端
|
|
||||||
/* prototype.isMobile = function () {
|
|
||||||
return (
|
|
||||||
device.os == "ios" ||
|
|
||||||
device.os == "android" ||
|
|
||||||
device.android ||
|
|
||||||
device.ios ||
|
|
||||||
(device.weixin && typeof device.weixin === Boolean)
|
|
||||||
);
|
|
||||||
}; */
|
|
||||||
|
|
||||||
const moveAction = throttle(move);
|
|
||||||
let distance;
|
|
||||||
let downX;
|
|
||||||
|
|
||||||
//按下
|
|
||||||
const down = function (e) {
|
|
||||||
e = e || window.event;
|
|
||||||
console.log(e.path);
|
|
||||||
distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
|
|
||||||
//按下的坐标
|
|
||||||
downX = e.clientX;
|
|
||||||
on("selectstart", window, handle_select, { once: true });
|
|
||||||
on("mouseup", window, stop);
|
|
||||||
on("mousemove", window, moveAction);
|
|
||||||
};
|
|
||||||
|
|
||||||
//移动
|
|
||||||
function move(e) {
|
|
||||||
e = e || window.event;
|
|
||||||
let moveX = e.clientX;
|
|
||||||
//鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
|
|
||||||
let offsetX = moveX - downX;
|
|
||||||
if (offsetX > 0) {
|
|
||||||
e.path[0].style.left = offsetX + "px";
|
|
||||||
e.path[1].childNodes[0].style.width = offsetX + "px";
|
|
||||||
//鼠标的水平移动距离 >= 滑动成功的宽度
|
|
||||||
if (offsetX >= distance) {
|
|
||||||
prototype.isOk = true;
|
|
||||||
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
|
|
||||||
off("mousedown", window, down);
|
|
||||||
off("mousemove", window, moveAction);
|
|
||||||
//最后调用回调
|
|
||||||
if (prototype.ok) prototype.ok();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//放开
|
|
||||||
const stop = function (e) {
|
|
||||||
//鼠标松开，如果滑到了终点，则验证通过
|
|
||||||
if (prototype.isOk === true) {
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
e.path[0].style.left = 0;
|
|
||||||
e.path[1].childNodes[0].style.width = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
|
|
||||||
off("selectstart", document, handle_select);
|
|
||||||
off("mouseup", window, stop);
|
|
||||||
off("mousemove", window, moveAction);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.slider-item {
|
|
||||||
height: 38px;
|
|
||||||
line-height: 38px;
|
|
||||||
background-color: #d0d0d0;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-bg {
|
|
||||||
position: absolute;
|
|
||||||
width: 40px;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-btn {
|
|
||||||
width: 40px;
|
|
||||||
height: 96%;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
cursor: move;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fff;
|
|
||||||
user-select: none;
|
|
||||||
color: #666;
|
|
||||||
z-index: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-btn:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-btn-success {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-text {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
user-select: none;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
z-index: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-error {
|
|
||||||
animation: glow 800ms ease-out infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glow {
|
|
||||||
0% {
|
|
||||||
border-color: #e6e6e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
border-color: #ff5722;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user