Scrollbar
用于替换浏览器原生滚动条。
基础用法
通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示代码
vue
<template>
<div class="scrollbar-content scrollbar-basic">
<ued-scrollbar height="400px">
<p v-for="item in 20" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</ued-scrollbar>
</div>
</template>
<style lang="scss" scoped>
.scrollbar-demo-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--ued-color-primary-light-9);
color: var(--ued-color-primary);
}
</style>横向滚动
当元素宽度大于滚动条宽度时，会显示横向滚动条。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示代码
vue
<template>
<div class="scrollbar-content scrollbar-horizontal">
<ued-scrollbar>
<div class="scrollbar-flex-content">
<p v-for="item in 20" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</div>
</ued-scrollbar>
</div>
</template>
<style lang="scss" scoped>
.scrollbar-flex-content {
display: flex;
}
.scrollbar-demo-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--ued-color-danger-light-9);
color: var(--ued-color-danger);
}
</style>最大高度
当元素高度超过最大高度，才会显示滚动条。
1
2
3
显示代码
vue
<template>
<div class="scrollbar-content scrollbar-max-height">
<ued-button @click="add">添加</ued-button>
<ued-button @click="onDelete">删除</ued-button>
<ued-scrollbar max-height="400px">
<p v-for="item in count" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</ued-scrollbar>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(3)
const add = () => {
count.value++
}
const onDelete = () => {
if (count.value > 0) {
count.value--
}
}
</script>
<style lang="scss" scoped>
.scrollbar-demo-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--ued-color-primary-light-9);
color: var(--ued-color-primary);
}
</style>手动滚动
通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
显示代码
vue
<template>
<div class="scrollbar-content scrollbar-set-scroll">
<ued-scrollbar
ref="scrollbarRef"
height="400px"
always
@scroll="handleScroll"
>
<div ref="innerRef">
<p v-for="item in 20" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</div>
</ued-scrollbar>
<ued-button @click="up">上移</ued-button>
<ued-button @click="down">下移</ued-button>
</div>
</template>
<script lang="ts" setup>
import { UedScrollBar } from 'packages/components'
import { ref, onMounted } from 'vue'
const value = ref(0)
const max = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof UedScrollBar>>()
const up = () => {
value.value = value.value - 25
if (value.value <= 0) value.value = 0
scrollbarRef.value!.setScrollTop(value.value)
}
const down = () => {
value.value = value.value + 25
if (value.value >= max.value) value.value = max.value
scrollbarRef.value!.setScrollTop(value.value)
}
const handleScroll = ({ scrollTop }) => {
value.value = scrollTop
}
onMounted(() => {
max.value = innerRef.value!.clientHeight - 380
})
</script>
<style lang="scss" scoped>
.scrollbar-demo-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--ued-color-primary-light-9);
color: var(--ued-color-primary);
}
</style>API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 滚动条高度 | number/string | - |
| max-height | 滚动条最大高度 | number/string | - |
| native | 是否使用原生滚动条样式 | boolean | false |
| wrap-style | 包裹容器的自定义样式 | string/CSSSProperties/CSSSProperties[]/string[] | - |
| wrap-class | 包裹容器的自定义类名 | string | - |
| view-style | 视图的自定义样式 | string/CSSSProperties/CSSSProperties[]/string[] | - |
| view-class | 视图的自定义类名 | string | - |
| noresize | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 | boolean | false |
| tag | 视图的元素标签 | string | div |
| always | 滚动条总是显示 | boolean | false |
| min-size | 滚动条最小尺寸 | number | 20 |
插槽
| 插槽名 | 说明 |
|---|---|
| defalut | 自定义默认内容 |
事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| scroll | 当触发滚动事件时，返回滚动的距离 | ({ scrollLeft: number, scrollTop: number }) => void |
暴露
| 属性名 | 说明 | 类型 |
|---|---|---|
| handleScroll | 触发滚动事件 | () => void |
| scrollTo | 滚动到一组特定坐标 | (options: ScrollToOptions | number, yCoord?: number) => void |
| setScrollTop | 设置滚动条到顶部的距离 | (scrollTop: number) => void |
| setScrollLeft | 设置滚动条到左边的距离 | (scrollTop: number) => void |
| update | 手动更新滚动条状态 | () => void |
| wrapRef | 滚动条包裹的 ref 对象 | object{Ref<HTMLDivElement>} |