el-dialog组件

el-dialog是Element UI库中的一个内置组件，它是一个轻量级的弹出框，用于在页面上展示一些额外的内容，如模态对话框、确认提示等。这个组件通常包含一个自定义内容区域，并且支持动态显示和隐藏，以及配置丰富的选项，比如标题、大小调整、关闭按钮、确认/取消操作等。

在Vue.js中，你可以通过以下步骤使用`el-dialog`：

1. 引入Element UI库：在你的项目中安装并引入`element-ui`和`@vue/cli-plugin-element`。

npm install element-ui --save

然后，在main.js文件中导入并全局注册：

import ElementUI from 'element-ui';
import '@element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2. 在模板中创建对话框实例：

<template>
  <button @click="openDialog">打开对话框</button>
  <el-dialog :visible.sync="dialogVisible" title="对话框标题">
    <p>这是对话框的内容。</p>
    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>