vue3中element-ui loading text文字颜色怎么修改
时间: 2024-03-05 10:50:51 浏览: 199
Vue实现点击后文字变色切换方法
5星 · 资源好评率100%
在Vue3中使用Element-UI的Loading组件,可以通过以下方式修改加载文字的颜色:
1. 在全局CSS中修改:
```css
.el-loading-text {
color: red;
}
```
2. 在组件中通过scoped CSS修改:
```vue
<template>
<div>
<el-button @click="showLoading">显示Loading</el-button>
<el-loading :text="loadingText" :visible="loadingVisible" :background="loadingBgColor" class="loading-wrapper">
</el-loading>
</div>
</template>
<script>
export default {
data() {
return {
loadingText: '加载中...',
loadingVisible: false,
loadingBgColor: '#fff'
}
},
methods: {
showLoading() {
this.loadingVisible = true;
}
}
}
</script>
<style scoped>
.loading-wrapper .el-loading-text {
color: red;
}
</style>
```
在上面的代码中,我们通过在`.loading-wrapper`下面添加`.el-loading-text`的方式,修改了加载文字的颜色为红色。
阅读全文