jeecgboot-vue3 注意事项 (c) 弹出窗口的使用
最编程
2024-04-15 20:02:08
...
需求描述
点击按钮,弹窗窗体(子组件),确定后在子组件中完成业务逻辑处理(例如添加记录),然后回调父组件刷新以显示最近记录。
实现步骤
子组件
- 子组件定义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的要一致。
原文地址:https://www.cnblogs.com/mahongbiao/p/16303611.html
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
jeecgboot-vue3 注意事项 (c) 弹出窗口的使用
-
ActiViz(VTK 的 C# 库)学习使用体验之七:在三维窗口上显示二维文本
-
学习 NSIS 脚本:弹出窗口 MessageBox 的使用细节
-
使用宏定义时应注意事项的 C/C++ 示例
-
C# 当输入错误发生时,右下角的弹出窗口会显示错误信息
-
使用原生画布实现带头像的弹出窗口
-
使用H3C模拟器时的HCL特别提示与注意事项
-
使用layer.js实现弹出窗口中的表单提交,随后进行动作重定向
-
如何将XM MT5标准账户转换为MT4超低点差账户?(简单易懂的操作步骤)- 首先,请访问XM会员区官网并使用您的邮箱和密码登录,网址是https://clicks.pipaffiliates.com/c?c=872995&l=zh-hans&p=1。 登录后,在会员区首页下方找到“账户概览”,然后点击“添加新账户”。 接下来,您需要选择要使用的交易平台,可以选择MT4或MT5,并在账户选择页面中选择“Ultra Low Standard”超低点差账户。 根据平台要求,您需要重新设置和确认密码,以确保账户符合平台的规定。请注意,密码可以与之前的保持一致。 密码设置完成后,系统会自动生成一个新的交易账户(即低点差账户)和交易平台服务器,您可以在“账户概览”中查看详细信息。 注意事项: