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。
在这里插入图片描述

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-17 02:20:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-17 02:20:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-17 02:20:01       87 阅读
  4. Python语言-面向对象

    2024-03-17 02:20:01       96 阅读

热门阅读

  1. KY158 找x

    2024-03-17 02:20:01       37 阅读
  2. 两个数组的交集

    2024-03-17 02:20:01       38 阅读
  3. 2403d,无串插件传播uda

    2024-03-17 02:20:01       42 阅读
  4. 条款09:绝不在析构和构造中调用virtual函数

    2024-03-17 02:20:01       38 阅读
  5. 远程过程调用-buttonrpc源码解析1-序列化

    2024-03-17 02:20:01       41 阅读
  6. git reset

    2024-03-17 02:20:01       49 阅读