GenshinUI

使用useMockScrollDrag来模拟滚动拖拽。 Base 中的 ScrollView就使用了这个钩子

使用用例

在顶层作用域使用ref

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
  <div ref="scrollRef" class="container">
    <div class="" v-for="(_, index) in Array(100)" :key="index">{{ index }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useMockScrollDrag } from '@shi-zhong/genshin-ui'
const scrollRef = ref(null)

/**
 * 在没有指明movemethod时，默认1：1进行scrolltop拖拽滚动
 */
const { mouseState } = useMockScrollDrag(scrollRef, {})
</script>

在onMounted钩子中传入元素实例调用

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
当传入为 HTMLElement 类型的数据时，需要放在onMounted钩子中，此时无法暴露出mouseState，尽管可用let赋值，但很怪异，不推荐
<template>
  <div ref="scrollRef" class="container">
    <div class="" v-for="(_, index) in Array(100)" :key="index">{{ index }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMockScrollDrag } from '@shi-zhong/genshin-ui'
const scrollRef = ref(null)

onMounted(() => {
  useMockScrollDrag(scrollRef.value, {})
})
</script>

类型定义

function useMockScrollDrag(scrollRef: Ref<HTMLElement> | HTMLElement, options: MockScrollDragOptions): {
  mouseState: Ref<'up' | 'move' | 'down'>;
}

interface MockScrollDragOptions {
  mouseDown?: (e: MouseEvent & { payload?: object }) => void;
  mouseMove?: (
    e: MouseEvent & { payload?: object },
    mouseState: 'up' | 'move' | 'down'
  ) => void;
  mouseUp?: (e: MouseEvent & { payload?: object }) => void;
  moveMethod?: (
    crtPos: MousePositionInfo,
    pvePos: MousePositionInfo,
    e: MouseEvent & { payload?: object }
  ) => void | boolean;
  stopPropagation?: (e: MouseEvent & { payload?: object }) => boolean;
  debug?: boolean;
}

interface MousePositionInfo {
  clientX: number;
  clientY: number;
  movementX: number;
  movementY: number;
  offsetX: number;
  offsetY: number;
  pageX: number;
  pageY: number;
  calcMovementX: number;
  calcMovementY: number;
  timeStamp: number;
}

参数说明

参数名类型默认值说明
scrollRefRef<HTMLElement> | HTMLElement滚动容器 ref
optionsMockScrollDragOptions配置项

配置项额外说明

参数名说明
moveMethod显示返回 false 阻止本次移动
stopPropagation显示返回 false 阻止冒泡
debug启用true会在控制台输出ref
Last Updated:
Contributors: shi-zhong