jeecgboot-vue3笔记(三)弹窗的使用
需求描述
点击按钮,弹窗窗体(子组件),确定后在子组件中完成业务逻辑处理(例如添加记录),然后回调父组件刷新以显示最近记录。
实现步骤
子组件
- 子组件定义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笔记(三)弹窗的使用的更多相关文章
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- Mastering Web Application Development with AngularJS 读书笔记(三)
第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...
- Python 学习笔记三
笔记三:函数 笔记二已取消置顶链接地址:http://www.cnblogs.com/dzzy/p/5289186.html 函数的作用: 給代码段命名,就像变量給数字命名一样 可以接收参数,像arg ...
- 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现
本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- 构建高性能WEB站点笔记三
构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...
- Git 笔记三 Git的初步使用
Git 笔记三 Git的初步使用 在上一篇中,学习了如何配置Git环境,这一篇,开始学习Git的初步使用.Git的初步使用还是很简单的.总体上知道git init, git clone, git ad ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
随机推荐
- 前端面试题整理——手写flatern摊平数组
// flatern 是摊平数组 function flat(arr) { const isDeep = arr.some(item => item instanceof Array) if(! ...
- mysql在cmd中查询到的汉字乱码问题解决 方法一
只要执行如上两个 set character_set_connection = gbk; set character_set_results= gbk; 将编码格式转换成gbk即可
- hql常用查询语句
// HQL: Hibernate Query Language.// 特点:// >> 1,与SQL相似,SQL中的语法基本上都可以直接使用.// >> 2,SQL查询的是表 ...
- vue 多级组件数据传递
A包含B组件,B包含C组件 那么A 传递到C 组件可以通过 在B组件中绑定 $attrs 具体代码可以参见github: https://github.com/qiaoqiao10001/vueA ...
- Dart语言基础
文章目录 前言:dart语言简介 一.变量 1.1.类型推导 1.2.默认值 1.3.Final 和 const修饰符 二.内建类型 2.1.数据类型 2.2.集合的相关操作 三.函数 3.1.函数的 ...
- Rb(redis blaster),一个为 redis 实现 non-replicated 分片的 python 库
Rb,redis blaster,是一个为 redis 实现非复制分片(non-replicated sharding)的库.它在 python redis 之上实现了一个自定义路由系统,允许您自动定 ...
- Python操作数据库类 Oracle、Sqlserver、PostgreSQL
我在工作中经常使用Python,特点很明显,轻量,效率还不错,尤其在维护或者自动化方面. 下面是我使用到的访问数据库(Oracle.Sqlserver.PostgreSQL)的公共类. 一.Oracl ...
- Linux内核--链表结构(二)
Linux内核链表定义了一系列用于链表遍历的宏,本章详细描述. 一.container_of和offsetof 首先介绍两个很好用的宏container_of和offsetof.offsetof宏用于 ...
- Axios及其async await封装
Axios(IE8+) 基于promise的http库可用于浏览器与node.js 1.特性 支持promise API 拦截请求和相应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端 ...
- vue - scss 引入 外部 在线 css
<style lang="scss"> @import url('https://fonts.googleapis.com/css2?family=Lobster&am ...