element UI Loading 组件自定义字体大小

vue yekong

vue 数据大屏项目开发中需要使用Loading组件,但是项目是个超大屏,element UI Loading提供的样式字体太小了,我们需要改大一些。

vue2项目

element ui组件

element UI Loading 组件自定义字体大小

添加自定义类

这里我们添加一个自定义类

// 设置了5秒 可以按需配置
openFullScreen2() {
  const loading = this.$loading({
    lock: true,
    text: '加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'custom-loading' // 添加自定义类名
  });
  setTimeout(() => {
    loading.close();
  }, 5000);
}

给自定义类添加样式

<style lang="scss">
.custom-loading .el-icon-loading {
  font-size: 180px;

}

.custom-loading .el-loading-text {
  font-size: 120px;
  margin-top: 30px;
}

</style>

喜欢