feat: ✨添加 slider 两端锚点

xpyjs · May 2, 2023 · aef0a80 · aef0a80
1 parent 765611f
commit aef0a80
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git 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
@@ -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,13 +42,17 @@ export default () => {
       },
 
       onMove: (pos, e) => {
+        if (options.disabled?.()) return;
+
         isMove.value = true;
 
         left.value = e.clientX - delta.value;
         options?.onMove?.(left.value, e);
       },
 
       onEnd: (pos, e) => {
+        if (options.disabled?.()) return;
+
         mousedown.value = false;
         if (isMove.value) void options?.onEnd?.(left.value, e);