需求描述

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

实现步骤

子组件

  • 子组件定义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的要一致。

jeecgboot-vue3笔记(三)弹窗的使用的更多相关文章

  1. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  2. 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  3. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

  4. Python 学习笔记三

    笔记三:函数 笔记二已取消置顶链接地址:http://www.cnblogs.com/dzzy/p/5289186.html 函数的作用: 給代码段命名,就像变量給数字命名一样 可以接收参数,像arg ...

  5. 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现

    本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...

  6. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  7. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  8. 构建高性能WEB站点笔记三

    构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

  9. Git 笔记三 Git的初步使用

    Git 笔记三 Git的初步使用 在上一篇中,学习了如何配置Git环境,这一篇,开始学习Git的初步使用.Git的初步使用还是很简单的.总体上知道git init, git clone, git ad ...

  10. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

随机推荐

  1. 搭建 LNMP 环境

    搭建 LNMP 环境 搭建 Nginx 静态服务器 安装 Nginx 使用 yum 安装 Nginx: yum install nginx -y 修改 /etc/nginx/conf.d/defaul ...

  2. nodejs制作爬虫程序

    在nodejs中,可以通过不断对服务器进行请求,以及本身的fs  =>filesystem 模块和clientRequest模块对网站的资源进行怕取,目前只做到了对图片的趴取!视频文件格式各异, ...

  3. vue中执行npm run build报错解决方法?

    遇到了执行npm run build 后报错: [build:js ] Module not found: Error: Can't resolve 'scss-loader' in 'D:\work ...

  4. 使用pyttsx3实现简单tts服务

    操作系统:Windows 10_x64 python版本:Python 3.9.2_x64 pyttsx3版本: 2.90   pyttsx3是一个tts引擎包装器,可对接SAPI5.NSSS(NSS ...

  5. 对 rest 参数的理解

    扩展运算符被用在函数形参上时,它还可以把一个分离的参数序列整合成一个数组: function mutiple(...args) { let result = 1; for (var val of ar ...

  6. Ubu18开机自启动

    Ubu开机自启动 简单示例 在/etc/init.d/目录下新建启动脚本Test #!/bin/bash ### BEGIN INIT INFO # Provides: Test # Required ...

  7. VScode链接服务器并配置公钥-SSH Keys

    VScode链接服务器并配置公钥-SSH Keys 一直在用Xshell做SSH连接服务器与虚拟机,但是中文乱码的问题一直找不到解决方案,干脆使用编辑器自带的插件,集成之后用起来也方便 1.概述 做法 ...

  8. Android第七周作业

    1.三个界面,界面1点击按钮使用显式意图开启界面2.界面2点击按钮隐式意图开启界面3 package com.example.myapplication; import androidx.appcom ...

  9. Vagrant详细教程

    一.安装virtualBox 进入 VirtualBox 的主页,即可进入下载页面. VirtualBox 是一个跨平台的虚拟化工具,支持多个操作系统,根据自己的情况选择对应的版本下载即可. 在安装完 ...

  10. [报告] Microsoft :Application of deep learning methods in speech enhancement

    Application of deep learning methods in speech enhancement 语音增强中的深度学习应用 按: 本文是DNS,AEC,PLC等国际级语音竞赛的主办 ...