ElementPlus弹出对话框dialog

简介

建议可参考 elementplus 官网介绍：https://element-plus.gitee.io/zh-CN/component/dialog.html#基础用法

el-dialog 组件可以实现在网页顶层弹出一个带遮罩的对话框，对话框的内容可以给我们自定义

官网上对于具体属性的介绍已经相当全面，这里不再过多赘述

套用外部组件

思路简介

需求：点击按钮弹出添加用户窗口，对话框内点击确认后自动校验表单，若不符合则不关闭对话框，若符合就关闭对话框

实现方法：（我们将外部组件称为子组件，el-dialog 标签所在的文件称为父组件）

1. 编写外部组件 insert-user-comp.vue
2. el-dialog 中使用 component 组件引用外部组件
3. 子组件提交表单 validate 校验
4. 使用 mitt 插件向父组件传递“校验成功”讯号，关闭对话框

需要安装 mitt： npm i mitt

父组件主体

在 template 中的任意地方都可以直接添加 el-dialog 标签，因为其弹出时会自动置于顶层，所以标签所在位置无影响；

下面展示了一个点击“添加用户”按钮后弹出对话框的案例

使用 component 标签以直接在 dialog 标签内渲染外部组件

<template>
  <!-- 网页内容 -->
  <div class="iu-container">
    <div class="iu-main">
      <div class="iu-header">
        <el-button type="primary" @click="insertStatus=!insertStatus"
          >添加用户</el-button
        &g