fix: 修复 slider 组件偏移量问题 🥱🥱🥱

FightingDesign · Feb 28, 2023 · 10b0b7f · 10b0b7f
1 parent 39ce9d6
commit 10b0b7f
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 29 deletions.
diff --git a/packages/fighting-design/_hooks/use-ripples/index.ts b/packages/fighting-design/_hooks/use-ripples/index.ts
@@ -104,8 +104,8 @@ export const useRipples = (evt: MouseEvent, node: HTMLElement, options: RipplesO
      *
      * 其它写法
      *
-     * const x: number = this.evt.clientX - (this.evt.target as HTMLElement).offsetLeft
-     * const y: number = this.evt.clientY - (this.evt.target as HTMLElement).offsetTop
+     * const x: number = evt.clientX - (evt.target as HTMLElement).offsetLeft
+     * const y: number = evt.clientY - (evt.target as HTMLElement).offsetTop
      *
      * @see clientX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
      * @see clientY https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY

diff --git a/packages/fighting-design/_hooks/use-slider/index.ts b/packages/fighting-design/_hooks/use-slider/index.ts
@@ -7,16 +7,23 @@ export * from './interface.d'
  *
  * @param { Object } el 滑块元素节点
  * @param { Function } callback 回调方法
+ * @param { number } left 距离左侧的偏移量
  * @returns { Function } 开始监听滚动的方法
  */
-export const useSlider = (el: HTMLElement, callback: UseSliderCallback): UseSliderReturn => {
+export const useSlider = (el: HTMLElement, callback: UseSliderCallback, left: number): UseSliderReturn => {
   /**
    * 移动时触发的方法
    *
+   * @see MouseEvent.clientX https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/clientX
    * @param { Object } evt 事件对象
    */
   const move = (evt: MouseEvent): void => {
-    callback(evt.clientX)
+    /**
+     * MouseEvent.clientX 可获取客户端区域的水平坐标
+     *
+     * 水平坐标 - 左侧偏移量 = 实际坐标
+     */
+    callback(evt.clientX - left)
   }
 
   /**

diff --git a/packages/fighting-design/slider/src/slider.vue b/packages/fighting-design/slider/src/slider.vue
@@ -25,9 +25,15 @@
    * 滑动条宽度
    *
    * @see HTMLElement.offsetWidth https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
+   * @see HTMLElement.offsetLeft https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft
    */
-  const sliderWidth = computed((): number => {
-    return parseInt((sliderEl.value as HTMLDivElement).offsetWidth + '')
+  const sliderOffset = computed((): { offsetWidth: number; offsetLeft: number } => {
+    /** 获取一个元素的布局宽度 */
+    const offsetWidth: number = parseInt((sliderEl.value as HTMLDivElement).offsetWidth + '')
+    /** 获取节点的左边界偏移的像素值 */
+    const offsetLeft: number = parseInt((sliderEl.value as HTMLDivElement).offsetLeft + '')
+
+    return { offsetWidth, offsetLeft } as const
   })
 
   /** 类名列表 */
@@ -69,15 +75,19 @@
     /** 如果元素节点存在 */
     if (sliderCircle.value) {
       /** 开始监听 dom 按下时的事件 */
-      const startListen = useSlider(sliderCircle.value, (num: number): void => {
-        if (prop.disabled) return
-
-        /** 获取到当前拖动的占比 */
-        const percentage: number = (num * 100) / sliderWidth.value
-
-        /** 重新设置样式位置 */
-        setPosition(percentage)
-      })
+      const startListen = useSlider(
+        sliderCircle.value,
+        (num: number): void => {
+          if (prop.disabled) return
+
+          /** 获取到当前拖动的占比 */
+          const percentage: number = (num * 100) / sliderOffset.value.offsetWidth
+
+          /** 重新设置样式位置 */
+          setPosition(percentage)
+        },
+        sliderOffset.value.offsetLeft
+      )
 
       startListen()
       setPosition(((prop.modelValue - prop.min) * 100) / (prop.max - prop.min))

diff --git a/packages/fighting-theme/src/pagination.scss b/packages/fighting-theme/src/pagination.scss
@@ -6,6 +6,7 @@
 
   &__prev-more > *,
   &__next-more > * {
+    // https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
     pointer-events: none;
   }
 

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,20 +1,12 @@
 <script lang="ts" setup>
-  const imageList = [
-    {
-      url: 'https://tianyuhao.cn/images/fighting-design/1.jpg',
-      text: '122222222222223'
-    },
-    'https://tianyuhao.cn/images/fighting-design/2.jpg',
-    'https://tianyuhao.cn/images/fighting-design/2.jpg',
-    'https://tianyuhao.cn/images/fighting-design/2.jpg',
-    'https://tianyuhao.cn/images/fighting-design/3.jpg'
-  ]
+  import { ref } from 'vue'
 
-  const change = (evt, index, item): void => {
-    console.log(evt, index, item)
-  }
+  const value1 = ref(50)
 </script>
 
 <template>
-  <f-expand-card round :image-list="imageList" :on-change="change" />
+  <div style="width: 500px; margin: auto">
+    <h2>{{ value1 }}</h2>
+    <f-slider v-model="value1" :min="0" :max="100" />
+  </div>
 </template>