vue3 el-scrollbar定位
时间: 2024-06-04 15:05:33 浏览: 17
el-scrollbar是一个基于Vue2的自定义滚动条组件,它可以用于解决浏览器自带滚动条无法满足设计需求的问题。而在Vue3中,由于引入了Composition API,使用方式也有了一些变化。
在Vue3中,可以通过createApp函数创建Vue实例,并在setup函数中使用el-scrollbar组件。具体使用方式如下:
```javascript
<template>
<el-scrollbar :view-class="viewClass" :wrap-class="wrapClass">
<!-- 滚动内容 -->
</el-scrollbar>
</template>
<script>
import { createApp } from 'vue'
import ElScrollbar from 'element-plus/lib/el-scrollbar'
import 'element-plus/lib/theme-chalk/el-scrollbar.css'
export default {
setup() {
const viewClass = 'custom-view-class'
const wrapClass = 'custom-wrap-class'
return {
viewClass,
wrapClass
}
}
}
</script>
```
在上面的例子中,我们使用了Element-Plus库提供的el-scrollbar组件,并且在setup函数中定义了viewClass和wrapClass两个属性来自定义滚动条的样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)