vue3使用el-dialog

Vue3中，Element Plus（简称`el-dialog`）是一个轻量级且功能强大的对话框组件，常用于实现模态对话框的功能。它是基于Element UI库提供的，但在Vue3中可以直接导入并使用，无需依赖整个Element UI。

要在Vue3项目中使用`el-dialog`，你需要先安装Element Plus，可以通过npm或yarn来添加：

// npm
npm install element-plus

// yarn
yarn add element-plus

然后在你的组件文件中引入`<el-dialog>`标签，并使用`ref`来获取组件实例以便操作打开、关闭等方法：

<template>
  <el-button @click="openDialog">打开对话框</el-button>
  <el-dialog ref="dialog" :visible.sync="dialogVisible">
    <!-- 对话框的内容 -->
    <div>这是对话框的内容</div>
    <el-dialog-footer>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-dialog-footer>
  </el-dialog>
</template>

<script setup>
import { ElDialog } from 'element-plus';

const dialogVisible = ref(false);
const openDialog = () => (dialogVisible.value = true);
const confirm = () => {
  // 确认操作...
  dialogVisible.value = false;
};
const cancel = () => {
  // 取消操作...
  dialogVisible.value = false;
};
</script>

在这个例子中，`openDialog`方法会开启对话框，点击“确定”按钮则会关闭对话框。