From 6b5c8ed6d9097daca3710787366d3ce9b938452a Mon Sep 17 00:00:00 2001
From: Bob <731653765@qq.com>
Date: Tue, 9 Nov 2021 22:46:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(slider):=20=E4=BC=98=E5=8C=96=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E6=95=88=E6=9E=9C=EF=BC=8C=E6=8C=89=E9=92=AE=E9=9A=8F?=
 =?UTF-8?q?=E7=81=B0=E6=9D=A1=E6=8B=96=E5=8A=A8=E8=80=8C=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/slider/index.ts       |  2 +-
 packages/devui-vue/devui/slider/src/slider.tsx | 18 +++++++++++-------
 .../devui-vue/docs/components/slider/index.md  | 17 +++++++++--------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/devui-vue/devui/slider/index.ts b/packages/devui-vue/devui/slider/index.ts
index 8138b2ba..f4596b77 100644
--- a/packages/devui-vue/devui/slider/index.ts
+++ b/packages/devui-vue/devui/slider/index.ts
@@ -10,7 +10,7 @@ export { Slider }
 export default {
   title: 'Slider 滑块',
   category: '数据录入',
-  status: '80%',
+  status: '已完成',
   install(app: App): void {
     app.use(Slider as any)
   }
diff --git a/packages/devui-vue/devui/slider/src/slider.tsx b/packages/devui-vue/devui/slider/src/slider.tsx
index 0e4fc5f3..36197948 100644
--- a/packages/devui-vue/devui/slider/src/slider.tsx
+++ b/packages/devui-vue/devui/slider/src/slider.tsx
@@ -40,10 +40,10 @@ export default defineComponent({
       const sliderWidth = sliderRunway.value.clientWidth;
       currentPosition.value = (sliderWidth * (inputValue.value - props.min)) / (props.max - props.min);
     });
-    function handleonMousedown(event: MouseEvent) {
+    function handleButtonMousedown(event: MouseEvent) {
       popoverShow.value = true;
       //props.disabled状态是不能点击拖拽的
-      if (props.disabled || props.disabled) return;
+      if (props.disabled) return;
       //阻止默认事件
       event.preventDefault();
       dragStart(event);
@@ -98,7 +98,6 @@ export default defineComponent({
       const steps = Math.round(newPosition / LengthPerStep);
       //实际的偏移像素
       const value: number = steps * LengthPerStep;
-
       //要是刚好划过半段切刚好超出最大长度的情况进行限定
       if (Math.round(value) >= sliderWidth) {
         currentPosition.value = sliderWidth;
@@ -115,12 +114,13 @@ export default defineComponent({
       currentPosition.value = newPosition;
       ctx.emit('update:modelValue', inputValue.value);
     }
-    //当点击滑动条时,
-    function handleClick(event) {
+    //当在滑动条触发鼠标事件时处理,
+    function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
         startX = event.target.getBoundingClientRect().left;
         const currentX = event.clientX;
         setPostion(currentX - startX);
+        handleButtonMousedown(event);
       } else {
         return;
       }
@@ -160,13 +160,17 @@ export default defineComponent({
     return () => (
       <div class='devui-slider'>
         {/* 整个的长度 */}
-        <div ref={sliderRunway} class={'devui-slider__runway' + disableClass.value} onClick={handleClick}>
+        <div
+          ref={sliderRunway} class={'devui-slider__runway' + disableClass.value}
+          onMousedown={handleRunwayMousedown}
+          onMouseout={() => (popoverShow.value = false)}
+        >
           {/* 滑动后左边的进度条 */}
           <div class={'devui-slider__bar' + disableClass.value} style={{ width: percentDispaly.value }}></div>
           <div
             class={'devui-slider__button' + disableClass.value}
             style={{ left: percentDispaly.value }}
-            onMousedown={handleonMousedown}
+            onMousedown={handleButtonMousedown}
             onMouseenter={() => (popoverShow.value = true)}
             onMouseout={() => (popoverShow.value = false)}
           ></div>
diff --git a/packages/devui-vue/docs/components/slider/index.md b/packages/devui-vue/docs/components/slider/index.md
index e8af1c72..641dd54f 100644
--- a/packages/devui-vue/docs/components/slider/index.md
+++ b/packages/devui-vue/docs/components/slider/index.md
@@ -123,19 +123,20 @@ export default defineComponent({
 
 :::
 
-### 异定制 Popover 的显示内容
+### 定制 Popover 的显示内容
 
-通过 tipsRenderer 参数传入函数定制 Popover 内的显示内容。
+通过 tipsRenderer 参数传入定制 Popover 内的显示内容。
 :::demo
 
 ```vue
 <template>
-<div>
-<div class="slider-wrapper" style="padding:20px">
-  <d-slider  :min="minValue" :max="maxValue" v-model="inputValue" tipsRenderer="apple"></d-slider>
-   <br style="margin-bottom: 20px" />
-  <d-slider :min="minValue" :max="maxValue"  v-model="inputValue" tipsRenderer="null" ></d-slider>
-</div>
+  <div>
+    <div class="slider-wrapper" style="padding:20px">
+      <d-slider  :min="minValue" :max="maxValue" v-model="inputValue" tipsRenderer="apple"></d-slider>
+      <br style="margin-bottom: 20px" />
+      <d-slider :min="minValue" :max="maxValue"  v-model="inputValue" tipsRenderer="null" ></d-slider>
+    </div>
+  </div>
 </template>
 <script>
 import { defineComponent, ref } from 'vue';
-- 
Gitee