写一个element-plus弹出对话框的例子

以下是一个基于 Vue.js 和 Element Plus 的弹出对话框示例：

<template>
  <div class="dialog-example">
    <el-button @click="showDialog">打开对话框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="这是一个对话框" width="30%">
      <p>对话框内容</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  components: { ElButton, ElDialog },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style>
.dialog-example {
  margin: 20px;
}
</style>

在这个示例中，我们使用了 Element Plus 的 el-button 和 el-dialog 组件来创建一个简单的弹出对话框。当点击按钮时，showDialog 方法会将 dialogVisible 数据属性设置为 true，从而显示对话框。对话框包含一个标题、一些内容和两个按钮（取消和确定），这些都是使用 el-dialog 组件的属性和插槽来设置的。dialogVisible 数据属性也通过 .sync 修饰符与 el-dialog 组件的 visible 属性进行了双向绑定，这使得对话框的显示状态可以在组件内部和外部进行控制