element loading options说明

最新推荐文章于 2023-09-04 21:52:30 发布

原创最新推荐文章于 2023-09-04 21:52:30 发布 · 783 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Element-UI中使用Loading服务实现页面加载效果，包括设置lock、文本、图标、背景颜色和遮罩区域等配置，并展示了startLoading和endLoading函数的用法。

import { Loading } from 'element-ui'
let loading
function startLoading() {
  loading = Loading.service({
    lock: true,                             // 是否锁屏
    text: '正在加载...',                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
    target: '.sub-main',                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask',                     // 遮罩层新增类名
    fullscreen:false						// 全屏开关
  })
}
function endLoading() {
  if (loading) {
    loading.close()
  }
}