vue3 element-plus对话框

Vue3 Element Plus是一个基于Vue3的UI组件库，由Element UI团队升级而来，提供了丰富的、现代化的组件以及更好的性能。其中，对话框（Dialog）是Element Plus中常用的一个组件，用于显示一个可交互的弹出窗口，常用于表单验证、确认操作、提示信息等场景。

在Element Plus的Dialog组件中，你可以使用以下主要属性和方法：

- `model`: 双向绑定的数据模型，控制对话框的显示和隐藏状态。
- `title`: 对话框的标题文本。
- `content`: 对话框的主体内容，可以是HTML或Vue模板。
- `size`: 预设尺寸，如'medium'、'small'等，也可以自定义。
- `props`: 可以传递给内部元素的属性，比如`confirm`或`cancel`按钮的行为。
- `show` 或 `visible`: 控制对话框的显示，通常设置为响应式或通过方法触发。
- `on-ok` 或 `on-cancel`: 当点击确认或取消按钮时调用的回调函数。

使用示例：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="提示"
    width="40%"
    :mask-closable="false"
    :close-on-click-modal="false"
  >
    <p>这是一个对话框的内容...</p>
    <el-button @click="dialogVisible = false">关闭</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleOk() {
      // 点击确认按钮的处理
      this.dialogVisible = false;
    },
    handleClose() {
      // 自定义关闭逻辑
    },
  },
};
</script>