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
        >
      div>
      <div class="iu-body">div>
    div>
  div>

  
  <el-dialog
    v-model="insertStatus"
    style="width: 400px;"
    title="添加用户"
    draggable
  >
    
    <component :is="insertVue" />
  el-dialog>
template>

script

import { reactive, ref, watch } from "vue";
import insertVue from "../../components/modify/insert-user-comp.vue";
import emitter from "../../api/emitter.js";

// 设置对话框状态,若为true则弹出,false则关闭
const insertStatus = ref(false);

// 定义mitt接收器
const detectEmitter = () => {
  // 只要接收到true的信号,则关闭对话框
  emitter.on("insertResult", (data) => {
    if (data === true) insertStatus.value = !insertStatus;
  });
};
detectEmitter();

子组件主体

子组件中表单和校验规则大家可以参考官网自己写,这里不是关键点就不一一写出来了呜呜呜

下面的就是最重要的校验方法了
fastMessage 是我自己封装的一个弹出 ElMessage()
apiModify 为封装的 axios 请求


特别注意:mitt 广播数据时,数据必须是非响应式的数据,若直接传入一个 ref 或者 reactive 数据,那么接收者接收到的就是一个 proxy 代理,没法直接拿取数据而造成困难

// 校验方法
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log();

      // 注意注意!这里需要手动定义key与value,不可以直接使用响应式数据formLabelAlign
      addUser({
        uname: formLabelAlign.username,
        pwd: formLabelAlign.password,
        role: formLabelAlign.role,
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// axios请求方法
const addUser = async (insertData) => {
  await apiModify
    .insertUser("/mdb/insertuser", insertData)
    .then((res) => {
      fastMessage.success(res.data.msg);

      // 若后端放回成功信息,则向父组件传递true来关闭对话框
      emitter.emit("insertResult", true);
    })
    .catch((err) => {
      fastMessage.error(err.response.data.msg);
    });
};

你可能感兴趣的:(#,Vue,vue.js,javascript,前端)