2
2
import { useElementHover } from ' @vueuse/core' ;
3
3
import { useThemeVars } from ' naive-ui' ;
4
4
import { onMounted , onUnmounted , ref } from ' vue' ;
5
- const props = withDefaults (
6
- defineProps <{
5
+ const props = withDefaults (defineProps <{
7
6
modelValue: number ;
8
7
loadValue? : number ;
9
8
width? : number ;
10
9
height? : number ;
11
- }>(), { width: 500 , height: 4 , loadValue: 0 }
12
- );
10
+ }>(), { width: 500 , height: 4 , loadValue: 0 });
13
11
let isTargetClick = ref (false );
14
12
let startWidth = props .width * (props .modelValue / 100 );
15
13
const mousePosition = { y: 0 , x: 0 };// 鼠标坐标
@@ -28,9 +26,7 @@ const handleSliderMouseDown = (e:MouseEvent) => {
28
26
if (isTargetClick .value ) return ;
29
27
let { offsetX } = e ;
30
28
let percentage = calcPercentage (offsetX );
31
- emit (
32
- ' update:modelValue' , percentage
33
- );
29
+ emit (' update:modelValue' , percentage );
34
30
startWidth = getProgressWidth (percentage );
35
31
emit (' change' );
36
32
emit (' onDone' );
@@ -46,13 +42,9 @@ const handleMouseMove = (e:MouseEvent) => {
46
42
if (! isTargetClick .value ) return ;
47
43
moveDiff .x += e .clientX - mousePosition .x ;
48
44
if (moveDiff .x > 0 ) {
49
- moveDiff .x = Math .min (
50
- props .width , moveDiff .x
51
- );
45
+ moveDiff .x = Math .min (props .width , moveDiff .x );
52
46
} else {
53
- moveDiff .x = Math .max (
54
- - props .width , moveDiff .x
55
- );
47
+ moveDiff .x = Math .max (- props .width , moveDiff .x );
56
48
}
57
49
let value;
58
50
if (e .clientX > mousePosition .x ) {
@@ -61,12 +53,8 @@ const handleMouseMove = (e:MouseEvent) => {
61
53
value = calcPercentage (startWidth + moveDiff .x );
62
54
}
63
55
if (value >= 0 && value <= 100 && value !== props .modelValue ) {
64
- emit (
65
- ' update:modelValue' , value
66
- );
67
- emit (
68
- ' change' , value
69
- );
56
+ emit (' update:modelValue' , value );
57
+ emit (' change' , value );
70
58
}
71
59
mousePosition .x = e .clientX ;
72
60
};
@@ -96,23 +84,13 @@ const handleMouseOut = (evt:any) => {
96
84
};
97
85
const getProgressWidth = (percentage : number ) => props .width * (percentage / 100 );
98
86
onMounted (() => {
99
- document .body .addEventListener (
100
- ' mousemove' , handleMouseMove
101
- );
102
- document .body .addEventListener (
103
- ' mouseup' , handleMouseUp
104
- );
105
- document .body .addEventListener (
106
- ' mouseout' , handleMouseOut
107
- );
87
+ document .body .addEventListener (' mousemove' , handleMouseMove );
88
+ document .body .addEventListener (' mouseup' , handleMouseUp );
89
+ document .body .addEventListener (' mouseout' , handleMouseOut );
108
90
});
109
91
onUnmounted (() => {
110
- document .body .removeEventListener (
111
- ' mousemove' , handleMouseMove
112
- );
113
- document .body .removeEventListener (
114
- ' mouseup' , handleMouseUp
115
- );
92
+ document .body .removeEventListener (' mousemove' , handleMouseMove );
93
+ document .body .removeEventListener (' mouseup' , handleMouseUp );
116
94
117
95
});
118
96
0 commit comments