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

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

2024-06-10 23:06:54 前端知识 前端哥 272 365 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11840.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!