From 10b0b7f2aa3f8830c37be89230d445df14b5c076 Mon Sep 17 00:00:00 2001
From: tyh2001 <1469442737@qq.com>
Date: Tue, 28 Feb 2023 08:58:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20slider=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=81=8F=E7=A7=BB=E9=87=8F=E9=97=AE=E9=A2=98=20?=
 =?UTF-8?q?=F0=9F=A5=B1=F0=9F=A5=B1=F0=9F=A5=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_hooks/use-ripples/index.ts               |  4 +--
 .../_hooks/use-slider/index.ts                | 11 +++++--
 .../fighting-design/slider/src/slider.vue     | 32 ++++++++++++-------
 packages/fighting-theme/src/pagination.scss   |  1 +
 start/src/App.vue                             | 20 ++++--------
 5 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/packages/fighting-design/_hooks/use-ripples/index.ts b/packages/fighting-design/_hooks/use-ripples/index.ts
index a59a7fed3e..64c29f7f43 100644
--- 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
index 3503ed3c0a..9594378bbb 100644
--- 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
index 6d3f06200a..75532c53c2 100644
--- 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
index 8ed3bc0ed6..ce07635e82 100644
--- 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
index 0e8f640bab..dab721810e 100644
--- 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>