elementplus 创建弹框

### 使用 Element Plus 创建弹窗组件

在 Vue 3 中利用 Element Plus 构建弹出框可以极大提高开发效率并保持界面一致性。下面展示的是基于 `ElDialog` 组件来创建一个简单的自定义弹出框实例。

#### 定义 Dialog 组件

首先，创建一个新的 Vue 单文件组件用于表示对话框：

<template>
  <el-dialog :visible.sync="dialogVisible" title="提示">
    <span>这是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dialogVisible = ref(false);

defineExpose({
  open() {
    dialogVisible.value = true;
  },
});

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

function handleConfirm() {
  console.log('确认');
  handleClose();
}
</script>

此部分实现了基础的弹出窗口逻辑，并提供了公开方法供外部调用[^1]。

#### 调用 Dialog 组件

接着，在其他地方使用该组件时只需要导入它并通过编程方式控制其显示状态即可：

<template>
  <div>
    <!-- 其他内容 -->
    <button @click="showDialog">打开对话框</button>
    
    <CustomDialog ref="customDialogRef"/>
  </div>
</template>

<script setup lang="ts">
import CustomDialog from './components/CustomDialog.vue';
import { ref, nextTick } from 'vue';

const customDialogRef = ref();

async function showDialog() {
  await nextTick(); // 确保 DOM 已更新
  (customDialogRef.value as any).open();
}
</script>

上述代码片段展示了如何在一个按钮点击事件处理器中触发弹出框的显示操作[^2]。