<template>
|
<div class="scrollbar">
|
<div
|
ref="wrap"
|
:class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']"
|
:style="wrapStyle"
|
@scroll="handleScroll"
|
>
|
<component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle">
|
<slot></slot>
|
</component>
|
</div>
|
<template v-if="!native">
|
<bar :move="moveX" :size="sizeWidth" />
|
<bar vertical :move="moveY" :size="sizeHeight" />
|
</template>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
nextTick,
|
provide,
|
unref,
|
watch,
|
type PropType,
|
} from 'vue';
|
import type { StyleValue } from '@/utils/types';
|
import { addResizeListener, removeResizeListener } from '@/utils/event';
|
import componentSetting from '@/settings/componentSetting';
|
import Bar from './bar';
|
|
defineOptions({ name: 'Scrollbar' });
|
|
const props = defineProps({
|
native: {
|
type: Boolean,
|
default: componentSetting.scrollbar?.native ?? false,
|
},
|
wrapStyle: {
|
type: [String, Array, Object] as PropType<StyleValue>,
|
default: '',
|
},
|
wrapClass: {
|
type: [String, Array],
|
default: '',
|
},
|
viewClass: {
|
type: [String, Array],
|
default: '',
|
},
|
viewStyle: {
|
type: [String, Array],
|
default: '',
|
},
|
noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
|
tag: {
|
type: String,
|
default: 'div',
|
},
|
scrollHeight: {
|
// 用于监控内部scrollHeight的变化
|
type: Number,
|
default: 0,
|
},
|
});
|
|
const sizeWidth = ref('0');
|
const sizeHeight = ref('0');
|
const moveX = ref(0);
|
const moveY = ref(0);
|
const wrap = ref();
|
const resize = ref();
|
|
provide('scroll-bar-wrap', wrap);
|
|
const handleScroll = () => {
|
if (!props.native) {
|
moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
|
moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth;
|
}
|
};
|
|
const update = () => {
|
if (!unref(wrap)) return;
|
|
const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
|
const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
|
|
sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
|
sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
|
};
|
|
watch(
|
() => props.scrollHeight,
|
() => {
|
if (props.native) return;
|
update();
|
},
|
);
|
|
defineExpose({
|
wrap,
|
});
|
|
onMounted(() => {
|
if (props.native) return;
|
nextTick(update);
|
if (!props.noresize) {
|
addResizeListener(unref(resize), update);
|
addResizeListener(unref(wrap), update);
|
addEventListener('resize', update);
|
}
|
});
|
|
onBeforeUnmount(() => {
|
if (props.native) return;
|
if (!props.noresize) {
|
removeResizeListener(unref(resize), update);
|
removeResizeListener(unref(wrap), update);
|
removeEventListener('resize', update);
|
}
|
});
|
</script>
|
<style lang="less">
|
.scrollbar {
|
position: relative;
|
height: 100%;
|
overflow: hidden;
|
|
&__wrap {
|
height: 100%;
|
overflow: auto;
|
|
&--hidden-default {
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
display: none;
|
width: 0;
|
height: 0;
|
opacity: 0;
|
}
|
}
|
}
|
|
&__thumb {
|
display: block;
|
position: relative;
|
width: 0;
|
height: 0;
|
transition: 0.3s background-color;
|
border-radius: inherit;
|
background-color: rgb(144 147 153 / 30%);
|
cursor: pointer;
|
|
&:hover {
|
background-color: rgb(144 147 153 / 50%);
|
}
|
}
|
|
&__bar {
|
position: absolute;
|
z-index: 1;
|
right: 2px;
|
bottom: 2px;
|
transition: opacity 80ms ease;
|
border-radius: 4px;
|
opacity: 0;
|
|
&.is-vertical {
|
top: 2px;
|
width: 6px;
|
|
& > div {
|
width: 100%;
|
}
|
}
|
|
&.is-horizontal {
|
left: 2px;
|
height: 6px;
|
|
& > div {
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.scrollbar:active > .scrollbar__bar,
|
.scrollbar:focus > .scrollbar__bar,
|
.scrollbar:hover > .scrollbar__bar {
|
transition: opacity 340ms ease-out;
|
opacity: 1;
|
}
|
</style>
|
