vue3.0 ElementPlus 中文版入门教程 ElementPlus Scrollbar 滚动条
Scrollbar 滚动条
用于替换浏览器原生滚动条。
基础用法
通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。
<template>
<el-scrollbar height="400px">
<p class="item" v-for="item in 20">{{ item }}</p>
</el-scrollbar>
</template>
横向滚动
当元素宽度大于滚动条宽度时，会显示横向滚动条。
<template>
<el-scrollbar>
<div class="flex-content">
<p class="item" v-for="item in 50">{{ item }}</p>
</div>
</el-scrollbar>
</template>
最大高度
当元素高度超过最大高度，才会显示滚动条。
<template>
<el-button @click="add">添加元素</el-button>
<el-button @click="delete">删除元素</el-button>
<el-scrollbar max-height="400px">
<p class="item" v-for="item in count">{{ item }}</p>
</el-scrollbar>
</template>
<script>
export default {
data() {
return {
count: 3,
}
},
methods: {
add() {
this.count++
},
delete() {
if (this.count > 0) {
this.count--
}
},
},
}
</script>
手动滚动
通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。
<template>
<el-scrollbar ref="scrollbar" height="400px" always>
<div ref="inner">
<p class="item" v-for="item in 20">{{ item }}</p>
</div>
</el-scrollbar>
<el-slider
v-model="value"
@input="inputSlider"
:max="max"
:format-tooltip="formatTooltip"
></el-slider>
</template>
<script>
export default {
data() {
return {
max: 0,
value: 0,
}
},
mounted() {
this.max = this.$refs.inner.clientHeight - 380
},
methods: {
inputSlider(value) {
this.$refs.scrollbar.setScrollTop(value)
},
formatTooltip(value) {
return `${value} px`
},
},
}
</script>
Scrollbar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 滚动条高度 | string / number | — | — |
| max-height | 滚动条最大高度 | string / number | — | — |
| native | 是否使用原生滚动条样式 | boolean | — | false |
| wrap-style | 包裹容器的自定义样式 | string | — | — |
| wrap-class | 包裹容器的自定义类名 | string | — | — |
| view-style | 视图的自定义样式 | string | — | — |
| view-class | 视图的自定义类名 | string | — | — |
| noresize | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 | boolean | — | false |
| tag | 视图的元素标签 | string | — | div |
| always | 滚动条总是显示 | boolean | — | false |
| min-size | 滚动条最小尺寸 | number | — | 20 |
Scrollbar Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| scroll | 滚动时触发的事件 | 滚动距离 { scrollLeft, scrollTop } |
Scrollbar Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| setScrollTop | 设置滚动条到顶部的距离 | (scrollTop: number) |
| setScrollLeft | 设置滚动条到左边的距离 | (scrollLeft: number) |
| update | 手动更新滚动条状态 | — |