2021-11-12 06:46:13 +08:00
|
|
|
import type { CSSProperties } from 'vue'
|
|
|
|
|
2020-08-10 15:29:16 +08:00
|
|
|
export const BAR_MAP = {
|
|
|
|
vertical: {
|
|
|
|
offset: 'offsetHeight',
|
|
|
|
scroll: 'scrollTop',
|
|
|
|
scrollSize: 'scrollHeight',
|
|
|
|
size: 'height',
|
|
|
|
key: 'vertical',
|
|
|
|
axis: 'Y',
|
|
|
|
client: 'clientY',
|
|
|
|
direction: 'top',
|
|
|
|
},
|
|
|
|
horizontal: {
|
|
|
|
offset: 'offsetWidth',
|
|
|
|
scroll: 'scrollLeft',
|
|
|
|
scrollSize: 'scrollWidth',
|
|
|
|
size: 'width',
|
|
|
|
key: 'horizontal',
|
|
|
|
axis: 'X',
|
|
|
|
client: 'clientX',
|
|
|
|
direction: 'left',
|
|
|
|
},
|
2022-04-24 13:44:40 +08:00
|
|
|
} as const
|
2020-08-10 15:29:16 +08:00
|
|
|
|
2021-11-12 06:46:13 +08:00
|
|
|
export const renderThumbStyle = ({ move, size, bar }): CSSProperties => ({
|
|
|
|
[bar.size]: size,
|
|
|
|
transform: `translate${bar.axis}(${move}%)`,
|
|
|
|
})
|