element loading的使用记录

前言

简单记录一下

1. 使用
   dom准备

   	 <div
         v-show="!textareaListResult"
         ref="contentLoadingDom"
       / >
       const contentLoadingDom = ref<HTMLElement | null>(null);
   

   loading使用

   	import { ElLoading } from 'element-plus';
   	// 接口调用时
   	const loadingInstance = ElLoading.service({
         target: contentLoadingDom.value as HTMLElement,
         text: '识别中...',
       })
       // 接口调用结束
       loadingInstance.close()
   

2. 自定义gif动图

   从样式控制

   .el-loading-spinner{
    /*这个是自己想设置的 gif 加载动图*/
    background-image:url('@/assets/images/logo.png');
    background-repeat: no-repeat;
    background-size: 200px 120px;
    height:120px;
    width:100%;
    background-position:center;
    /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
    top:40%;
   }
   .el-loading-spinner .circular {
    /*隐藏 之前  element-ui  默认的 loading 动画*/
   
    display: none;
   
   }
   
   .el-loading-spinner .el-loading-text{
    /*为了使得文字在loading图下面*/
    margin:150px 0px;
   }