elementui loading自定义图标和字体样式

原创已于 2024-01-04 10:26:57 修改 · 2.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

于 2024-01-04 10:26:38 首次发布

UI组件二改专栏收录该内容

16 篇文章

订阅专栏

文章讲述了如何在VueElementUI的loading组件中，通过`element-loading-custom-class`属性实现特定字体大小的loading图标，并避免影响其他loading样式。作者分享了修改前后的代码示例和CSS样式定制的关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：页面是用了很多个loading，需要其中有一个字体大些（具体到图标也一样的方法，换下类名就行）
遇见的问题：改不好的话会影响其他的loading样式（一起改变了）
效果展示
- 改之前
- 改之后
关键知识点：element的loading自带的element-loading-custom-class="boxStyle"属性的使用（Loading 的自定义类名）

代码

<div class="box"
    v-loading="boxLoading"
    :element-loading-text="正在删除，请勿关闭..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 1)"
    element-loading-custom-class="boxStyle"
  >
 </div>
 
 //css
<style lang="stylus" scoped>
>>>.boxStyle
    font-size 40px 
    .el-loading-spinner .el-loading-text
          font-size: 24px;
          margin-top 10px
</style>