jeecgboot-vue3笔记（三）弹窗的使用

需求描述

点击按钮，弹窗窗体（子组件），确定后在子组件中完成业务逻辑处理（例如添加记录），然后回调父组件刷新以显示最近记录。

实现步骤

子组件

子组件定义BasicModal

代码语言：javascript复制

 <BasicModal v-bind="$attrs" @register="registerModal" title="登录样品" @ok="handleSubmit" :width="700" :helpMessage="['手工登录原辅料、产品、中控样等，通过选择采样点、检测方案等登录']" >

声明Emits

代码语言：javascript复制

// 声明Emits
    const emit = defineEmits(['success', 'register']);

响应register（父组件中注册子组件时）

代码语言：javascript复制

//表单赋值
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { 
      setModalProps({confirmLoading: false}); 
  });

响应ok（提交/确定子组件弹窗时执行）例如执行提交表单等，通过emit调用父组件方法，达到通知父组件的作用，例如添加记录后，可通知父组件刷新页面以显示新记录。

代码语言：javascript复制

//表单提交事件
    async function handleSubmit() {
        try {
            const values = {"loginType":"RawMaterial","SamplingPointid":"1"};
            // const values = await validate();
            let data = refScheduled.value.getFieldsValue();
            // console.log(data);
            setModalProps({confirmLoading: true});
            //提交表单
            await login(values);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

父组件

父组件引入相关ts

代码语言：javascript复制

import {useModal} from '/@/components/Modal';

useModal解构展开获取register（用于给子组件传递）、openModal方法起别名（多个弹窗必须）

代码语言：javascript复制

const [registerLoginManual, {openModal:openLoginManual}] = useModal();

父组件中子组件定义进行注册、传递ref

代码语言：javascript复制

<calculation @register="registerCalculation" @success="handleLoginSucc" ref="refCalculation"></calculation>

响应按钮事件显示窗体

代码语言：javascript复制

function onLoginManual(){
  // refLoginManual.value.
  openLoginManual(true, { 
       showFooter: true,
     });
}

解构的openModal和register在响应函数处调用的和组件@register的要一致。

ref 表单

0 人点赞