From aef0a806de281cc1b23b3e6d93ac099d0abefdaf Mon Sep 17 00:00:00 2001
From: jeremyjone <jeremyjone@qq.com>
Date: Tue, 2 May 2023 19:50:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=B7=BB=E5=8A=A0=20slider=20?=
 =?UTF-8?q?=E4=B8=A4=E7=AB=AF=E9=94=9A=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slider/index.vue | 57 +++++++++++++++++++++++++++++----
 src/composables/useDrag.ts      |  7 ++++
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
index fc09948..932d7e9 100644
--- a/src/components/slider/index.vue
+++ b/src/components/slider/index.vue
@@ -4,14 +4,23 @@
     :class="['xg-slider', 'xg-slider-drag']"
     :style="{ left: `${sliderLeft}px`, width: `${sliderWidth}px` }"
   >
+    <div class="xg-slider-anchor left-anchor" @pointerdown="onAnchorDown"></div>
+
     <slot v-if="slots.default" v-bind="props.data?.data" />
 
-    <span v-else-if="props.prop">{{ props.data?.data?.[props.prop] }}</span>
+    <span v-else-if="props.prop" class="xg-slider-text">{{
+      props.data?.data?.[props.prop]
+    }}</span>
+
+    <div
+      class="xg-slider-anchor right-anchor"
+      @pointerdown="onAnchorDown"
+    ></div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useSlots, ref, computed } from 'vue';
+import { defineComponent, useSlots, ref, computed, onMounted } from 'vue';
 import Variables from '@/constants/vars';
 import sliderProps from './props';
 import useData from '@/composables/useData';
@@ -43,6 +52,11 @@ const sliderWidth = computed(
     ganttColumnWidth.value
 );
 
+const disableMove = ref(false);
+function onAnchorDown() {
+  disableMove.value = true;
+}
+
 const setStart = (() => {
   const startDate = props.data?.start.clone();
   return (x: number) => {
@@ -67,8 +81,16 @@ const setEnd = (() => {
 })();
 
 const sliderRef = ref<HTMLElement | null>(null);
+onMounted(() => {
+  document.addEventListener('pointerup', () => {
+    disableMove.value = false;
+  });
+});
+
 const { onDrag } = useDrag();
 onDrag(sliderRef, {
+  disabled: () => disableMove.value,
+
   onMove: x => {
     setStart(x);
     setEnd(x);
@@ -80,22 +102,45 @@ onDrag(sliderRef, {
 @use 'sass:math';
 
 .xg-slider {
-  background-color: darkgoldenrod;
+  background-color: goldenrod;
   position: absolute;
   $h: 70%;
   height: $h;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 10px;
   top: math.div(100% - $h, 2);
+  padding: 0 12px;
+  transition: filter 0.2s;
+
+  .xg-slider-text {
+    vertical-align: middle;
+  }
 
   &:hover {
     filter: brightness(1.2);
-    border: 2px solid #aaa;
-    top: calc(math.div(100% - $h, 2) - 2px);
   }
 }
 
 .xg-slider.xg-slider-drag {
   cursor: ew-resize;
 }
+
+.xg-slider-anchor {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2px solid goldenrod;
+  position: absolute;
+  top: calc(50% - 3px);
+  cursor: pointer;
+}
+
+.left-anchor {
+  left: -12px;
+}
+
+.right-anchor {
+  right: -12px;
+}
 </style>
diff --git a/src/composables/useDrag.ts b/src/composables/useDrag.ts
index 9c8a238..0d6b4bf 100644
--- a/src/composables/useDrag.ts
+++ b/src/composables/useDrag.ts
@@ -13,6 +13,7 @@ interface DragOptions {
   onFinally?: () => void;
   target?: El;
   reset?: boolean;
+  disabled?: () => boolean;
 }
 
 type El = HTMLElement | SVGElement | null | undefined;
@@ -26,6 +27,8 @@ export default () => {
 
     useDraggable(el, {
       onStart: (pos, e) => {
+        if (options.disabled?.()) return;
+
         mousedown.value = true;
         isMove.value = false;
 
@@ -39,6 +42,8 @@ export default () => {
       },
 
       onMove: (pos, e) => {
+        if (options.disabled?.()) return;
+
         isMove.value = true;
 
         left.value = e.clientX - delta.value;
@@ -46,6 +51,8 @@ export default () => {
       },
 
       onEnd: (pos, e) => {
+        if (options.disabled?.()) return;
+
         mousedown.value = false;
         if (isMove.value) void options?.onEnd?.(left.value, e);