From afc3de03c7f52e60736e1d132698b88676c39a3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 30 Apr 2022 05:16:21 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20slider=20=E7=BB=84=E4=BB=B6=20btn=20=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/slider/Standard.vue         |   6 +
 .../src/component/slider/StandardRange.vue    |   6 +
 .../src/component/slider/Vertical.vue         |   6 +
 .../src/component/slider/VerticalRange.vue    |   6 +
 .../component/src/component/slider/index.less |   4 +-
 .../component/src/component/slider/index.vue  |   4 +-
 .../src/component/slider/sliderVerify.vue     | 169 ------------------
 7 files changed, 28 insertions(+), 173 deletions(-)
 delete mode 100644 package/component/src/component/slider/sliderVerify.vue

diff --git a/package/component/src/component/slider/Standard.vue b/package/component/src/component/slider/Standard.vue
index 0ed2e6ed..7970ad73 100644
--- a/package/component/src/component/slider/Standard.vue
+++ b/package/component/src/component/slider/Standard.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "StandardVue"
+}
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
diff --git a/package/component/src/component/slider/StandardRange.vue b/package/component/src/component/slider/StandardRange.vue
index 9a0abd98..4b355dcd 100644
--- a/package/component/src/component/slider/StandardRange.vue
+++ b/package/component/src/component/slider/StandardRange.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "StandardRange"
+}
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
diff --git a/package/component/src/component/slider/Vertical.vue b/package/component/src/component/slider/Vertical.vue
index 54fbe764..3aa14ec6 100644
--- a/package/component/src/component/slider/Vertical.vue
+++ b/package/component/src/component/slider/Vertical.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "Vertical"
+}
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
diff --git a/package/component/src/component/slider/VerticalRange.vue b/package/component/src/component/slider/VerticalRange.vue
index c0d12a76..3eeedc2a 100644
--- a/package/component/src/component/slider/VerticalRange.vue
+++ b/package/component/src/component/slider/VerticalRange.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "VerticalRange"
+}
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
diff --git a/package/component/src/component/slider/index.less b/package/component/src/component/slider/index.less
index c634030d..ea5d51fb 100644
--- a/package/component/src/component/slider/index.less
+++ b/package/component/src/component/slider/index.less
@@ -17,7 +17,7 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;
@@ -73,7 +73,7 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;
diff --git a/package/component/src/component/slider/index.vue b/package/component/src/component/slider/index.vue
index 91d477c9..ccd8acc2 100644
--- a/package/component/src/component/slider/index.vue
+++ b/package/component/src/component/slider/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 export default {
-  name: "LaySlider"
-}
+  name: "LaySlider",
+};
 </script>
 
 <script setup lang="ts">
diff --git a/package/component/src/component/slider/sliderVerify.vue b/package/component/src/component/slider/sliderVerify.vue
deleted file mode 100644
index dac3d03a..00000000
--- a/package/component/src/component/slider/sliderVerify.vue
+++ /dev/null
@@ -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>