From 002de9dd9e68be3edec1ea52274f458fee98ce69 Mon Sep 17 00:00:00 2001
From: wang <825251234@qq.com>
Date: Fri, 17 Dec 2021 20:52:45 +0800
Subject: [PATCH] =?UTF-8?q?slider=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/slider.md |  12 +-
 src/module/slider/index.less            | 134 ++++++++++++++++-----
 src/module/slider/index.vue             | 153 ++++++++++++++++--------
 3 files changed, 210 insertions(+), 89 deletions(-)

diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index 29310cc7..9dfcd472 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -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
     }
   }
 }
diff --git a/src/module/slider/index.less b/src/module/slider/index.less
index ba831de4..866b85cf 100644
--- a/src/module/slider/index.less
+++ b/src/module/slider/index.less
@@ -1,34 +1,102 @@
+// 横向样式
 .layui-slider-v {
-    width: 100%;
-    height: 50px;
-    /* background-color: palevioletred; */
-  }
-  
-  .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-rate-v {
-    width: 0%;
-    height: 4px;
-    position: absolute;
-    top: 6px;
-    left: 0;
-    background-color: rgb(0, 150, 136);
-  }
\ No newline at end of file
+  width: 100%;
+  height: 18px;
+  margin-bottom: 8px;
+}
+
+.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%;
+  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);
+  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;
+}
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index 4750a816..3c836f07 100644
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -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();
 }
 
-</script>
\ No newline at end of file
+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>