magiccube-vue3/package/components/table/scrollbar.js

vue3-js版组件库

import { ref, onUnmounted, nextTick } from 'vue'
const Scrollbar = {
    props: {
        type: String,
        scrollWidth: Number,
        scrollHeight: Number,
        thumbWidth: Number,
        thumbHeight: Number,
        x: {
            type: Number,
            default: 0
        },
        y: {
            type: Number,
            default: 0
        },

        // 自定义滚动条样式
        horizontalStyle: {
            type: Object,
            default: () => {}
        },
        verticalStyle: {
            type: Object,
            default: () => {}
        },
    },
    emits: ['move', 'mouseDragger'],
    setup(props, { emit }) {

        const wrapEl = ref(null)
        let isDraging = false,
            dragX = 0,
            dragY = 0
        const x = ref(0)
        const y = ref(0)

        const mouseDown = e => {
            isDraging = true
            dragX = e.clientX - x.value
            dragY = e.clientY - y.value
            emit('mouseDragger', true)
        }

        const mouseMove = e => {
            if(isDraging){
                if(props.type === 'horizontal'){
                    let m = e.clientX - dragX
                    m = m < 0? 0 : m
                    m = Math.min(m, wrapEl.value.offsetWidth - props.thumbWidth)
                    x.value = m
                    emit('move', {
                        type: props.type,
                        x: m,
                    })
                }
                if(props.type === 'vertical'){
                    let m = e.clientY - dragY
                    m = m < 0? 0 : m
                    m = Math.min(m, wrapEl.value.offsetHeight - props.thumbHeight)
                    y.value = m
                    emit('move', {
                        type: props.type,
                        y: m,
                    })
                }
            }
        }

        const blockMouseEvent = () => {
            if(isDraging){
                isDraging = false
                dragX = 0
                dragY = 0
                emit('mouseDragger', false)
            }
        }

        /* 监听鼠标点击抬起 取消移动监听 */
        const mouseUp = e => blockMouseEvent()

        nextTick(() => {
            window.addEventListener('mouseup', blockMouseEvent)
            window.addEventListener('mousemove', mouseMove)
        })

        onUnmounted(() => {
            window.removeEventListener('mouseup', blockMouseEvent)
            window.removeEventListener('mousemove', mouseMove)
        })

        return () => (
            <div ref={wrapEl}
                class={[
                    {
                        'mc-table__scrollbar__horizontal': props.type === 'horizontal',
                        'mc-table__scrollbar__vertical': props.type === 'vertical',
                    }
                ]}
                onMousedown={mouseDown}
                onMouseup={mouseUp}
                onMousemove={mouseMove}
                style={{
                    width: props.scrollWidth? props.scrollWidth + 'px' : '100%',
                    height: props.scrollHeight? props.scrollHeight + 'px' : '100%',
                    transform: `translate(${props.x}px, ${props.y}px)`,
                    ...props.horizontalStyle,
                    ...props.verticalStyle,
                }}>
                <div class={[
                    'mc-table__scrollbar--thumb',
                ]}
                style={{
                    width: props.thumbWidth? props.thumbWidth + 'px' : '100%',
                    height: props.thumbHeight? props.thumbHeight + 'px' : '100%',
                }}></div>
            </div>
        )
    }
}

export { Scrollbar, Scrollbar as default }