From 81afabf411eda055e41f75272259c1e4935748b9 Mon Sep 17 00:00:00 2001
From: wang <825251234@qq.com>
Date: Wed, 15 Dec 2021 21:24:40 +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 |   5 +-
 package.json                            |  19 ++---
 src/module/slider/index.less            |  34 ++++++++
 src/module/slider/index.vue             | 101 ++++++++++++++++++------
 4 files changed, 123 insertions(+), 36 deletions(-)
 create mode 100644 src/module/slider/index.less

diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index 8f3e6c7a..29310cc7 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></lay-slider>
+  <lay-slider v-model="value"></lay-slider>
 </template>
 
 <script>
@@ -9,8 +9,9 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-
+    const value = ref(50)
     return {
+      value
     }
   }
 }
diff --git a/package.json b/package.json
index 96f982af..5e5c341b 100644
--- a/package.json
+++ b/package.json
@@ -28,27 +28,28 @@
   "author": "就眠儀式",
   "license": "MIT",
   "peerDependencies": {
-    "vue": "^3.2.24",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "dependencies": {
-    "vue": "^3.2.24",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "evtd": "^0.2.3",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@types/node": "^16.11.9",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.4",
+    "@types/node": "^16.11.9",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vue/compiler-sfc": "^3.2.24",
     "@vue/server-renderer": "^3.2.24",
diff --git a/src/module/slider/index.less b/src/module/slider/index.less
new file mode 100644
index 00000000..ba831de4
--- /dev/null
+++ b/src/module/slider/index.less
@@ -0,0 +1,34 @@
+.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
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index 5eeec521..4750a816 100644
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -1,38 +1,89 @@
 <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-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-wrap-btn" style="border: 2px solid #009688"></div>
     </div>
   </div>
 
-  <div class="layui-slider" v-else>
-    <div class="layui-slider-tips"></div>
-    <div
-      class="layui-slider-bar"
-      style="background: #009688; width: 0%; left: 0"
-    ></div>
-    <div class="layui-slider-wrap" style="left: 0%">
-      <div
-        class="layui-slider-wrap-btn"
-        style="border: 2px solid #009688"
-      ></div>
+  <div class="layui-slider-v" v-else>
+    <div ref="tracker" @mousedown.stop="handle_mousedown" class="layui-slider-track-v">
+      <lay-tooltip :content="modelValue + ''">
+        <div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div>
+      </lay-tooltip>
+
+      <div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { defineProps, reactive, ref } from 'vue'
+import { on, off } from 'evtd'
+import './index.less'
 
-<script setup name="LaySlider" lang="ts">
-import { defineProps } from 'vue'
+const emit = defineEmits(["update:modelValue"]);
+
+interface LaySliderProps {
+  vertical?: boolean,
+  modelValue?: number,
+  min?: number,
+  max?: number,
+}
+
+const props = withDefaults(defineProps<LaySliderProps>(), {
+  vertical: false,
+  modelValue: 0,
+})
+
+const tracker = ref<HTMLElement | null>(null)
+const style = reactive({
+  left: props.modelValue,
+  width: props.modelValue
+})
+
+function handle_mousedown() {
+  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
+  } 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
+    }
+  }
+  emit('update:modelValue', style.left)
+}
+
+function handle_mouseup() {
+  // off('selectstart', document, handle_select)
+  off('mouseup', window, handle_mouseup)
+  off('mousemove', window, handle_mousemove)
+
+}
+
+function handle_select(e: Event): void {
+  e.preventDefault()
+}
 
-const props =
-  defineProps<{
-    vertical?: boolean
-  }>()
 </script>
\ No newline at end of file