vue使用elementPlus ui框架,如何给Dialog 对话框添加Loading 自定义类名显示隐藏

vue使用elementPlus ui框架时,如何给Dialog 对话框添加Loading 自定义类名,想要实现dialog对话框区域有loading效果

在这里插入图片描述
官方给出的这个API配置项customClass,使用不太明确。暂时无法实现绑定class。
在这里插入图片描述
最后的实现方式:

<template>
  <el-dialog
    v-model="dialogVisible"
    :align-center="true"
    title="上传弹框"
    width="700px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    class="loading-class"
  >
    <el-form ref="uplodDialogRef" :model="form" :rules="rules">
      <el-form-item label="应用" label-width="120px" >
      </el-form-item>
      <el-form-item label="渠道" label-width="120px">
      </el-form-item>
      <el-form-item label="上传" label-width="120px" >
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="submitBtn" type="primary">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

el-dialog绑定class="loading-class",然后:

<script lang="ts" setup>
import { ElLoading } from 'element-plus'
const submitBtn= ()=>{
	const loading = ElLoading.service({
     	target: '.loading-class'
   	})
   setTimeout(() => {
    	loading.close()
  	}, 2000)
}
</script>

实现效果如图,只展示dialog组件内有loading加载,其他区域无loading。
在这里插入图片描述

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回忆哆啦没有A梦

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值