需求描述

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

实现步骤

子组件

  • 子组件定义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. 前端面试题整理——手写flatern摊平数组

    // flatern 是摊平数组 function flat(arr) { const isDeep = arr.some(item => item instanceof Array) if(! ...

  2. mysql在cmd中查询到的汉字乱码问题解决 方法一

    只要执行如上两个 set character_set_connection = gbk; set character_set_results= gbk; 将编码格式转换成gbk即可

  3. hql常用查询语句

    // HQL: Hibernate Query Language.// 特点:// >> 1,与SQL相似,SQL中的语法基本上都可以直接使用.// >> 2,SQL查询的是表 ...

  4. vue 多级组件数据传递

    A包含B组件,B包含C组件   那么A 传递到C 组件可以通过 在B组件中绑定 $attrs 具体代码可以参见github: https://github.com/qiaoqiao10001/vueA ...

  5. Dart语言基础

    文章目录 前言:dart语言简介 一.变量 1.1.类型推导 1.2.默认值 1.3.Final 和 const修饰符 二.内建类型 2.1.数据类型 2.2.集合的相关操作 三.函数 3.1.函数的 ...

  6. Rb(redis blaster),一个为 redis 实现 non-replicated 分片的 python 库

    Rb,redis blaster,是一个为 redis 实现非复制分片(non-replicated sharding)的库.它在 python redis 之上实现了一个自定义路由系统,允许您自动定 ...

  7. Python操作数据库类 Oracle、Sqlserver、PostgreSQL

    我在工作中经常使用Python,特点很明显,轻量,效率还不错,尤其在维护或者自动化方面. 下面是我使用到的访问数据库(Oracle.Sqlserver.PostgreSQL)的公共类. 一.Oracl ...

  8. Linux内核--链表结构(二)

    Linux内核链表定义了一系列用于链表遍历的宏,本章详细描述. 一.container_of和offsetof 首先介绍两个很好用的宏container_of和offsetof.offsetof宏用于 ...

  9. Axios及其async await封装

    Axios(IE8+) 基于promise的http库可用于浏览器与node.js 1.特性 支持promise API 拦截请求和相应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端 ...

  10. vue - scss 引入 外部 在线 css

    <style lang="scss"> @import url('https://fonts.googleapis.com/css2?family=Lobster&am ...