element-plus infinite scroll修改滚动条样式
时间: 2023-11-12 12:08:12 浏览: 236
要修改 element-plus 的 infinite scroll 组件的滚动条样式,可以通过以下步骤实现:
1. 在项目中安装 `sass` 和 `sass-loader`,如果已经安装则可以跳过此步骤。
```
npm install sass sass-loader --save-dev
```
2. 在 `main.js` 中引入 `element-plus` 的样式文件和自定义的样式文件。
```js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './assets/styles/element-plus.scss' // 自定义样式文件
createApp(App).use(ElementPlus).mount('#app')
```
3. 在自定义的样式文件中,覆盖 `el-scrollbar` 和 `el-scrollbar__thumb` 的样式。
```scss
// 修改滚动条样式
.el-scrollbar {
&__thumb {
background-color: #409eff;
border-radius: 4px;
}
}
```
4. 在需要使用 infinite scroll 的组件中,设置 `element-loading-text` 属性为 `false`,以隐藏默认的加载提示。
```html
<el-infinite-scroll
:element-loading-text="false"
@load="loadMoreData"
:distance="10"
>
<!-- infinite scroll 内容 -->
</el-infinite-scroll>
```