在el-dialog中使用Loading

作者:admin 发布日期:2024年5月13日 20:39 浏览量:22

说明:这里使用的代码是 vue3 + TypeScript,下面是全部代码:

<template>
  <div>
    <el-dialog :title="title"
    v-model="open"

    width="500px"
    :close-on-click-modal="false"  // 鼠标点击弹窗外部不关闭弹窗
    :close-on-press-escape="false"  // 按下esc键不关闭弹窗
    ref="mv"
    >
      <template #footer>
       <div class="dialog-footer text-center">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElLoading } from 'element-plus'
const open = ref(false) // 控制 el-dialog 的弹出和关闭
const mv = ref() // 用于接收 el-dialog 对象
const dialogPanel = ref() // 接收 ElLoading.service对象,用于关闭 Loading

// el-dialog 触发 Loading 的函数
function initDialog () {
  dialogPanel.value = ElLoading.service({
  target: mv.value.dialogRef, // el-dialog 对象
  text: 'Loading...', // Loading 的提示信息
  background: 'rgba(0,0,0,0.7)', // 设置背景颜色和透明度
  })
}

/** 点击提交按钮, el-dialog 触发 Loading */
function submitForm() {
  initDialog()
  // Loading 延时两秒后关闭
  setTimeout(() => {
  dialogPanel.value.close()
  }, 2000)
}

function handleClose() {
  open.value = false;
}

const handleOpen = () => {
  open.value = true
}
</script>