标签：const register vue3 表单 jeecgboot 组件 setModalProps 弹窗

需求描述

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

实现步骤

子组件

• 子组件定义BasicModal

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

• 声明Emits

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

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

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

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

//表单提交事件
    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

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

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

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

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

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

• 响应按钮事件显示窗体

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

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

标签：const,register,vue3,表单,jeecgboot,组件,setModalProps,弹窗
来源： https://www.cnblogs.com/mahongbiao/p/16303611.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。