前言
简单记录一下
-
使用
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()
-
自定义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; }