FormCreate中在事件中获取api

news/2024/6/20 16:41:01

form-create中在事件中获取api

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定

FormCreate官网:https://www.form-create.com

帮助文档:https://pro.form-create.com/doc

体验地址:https://pro.form-create.com/view

数据结构​

inject 参数的数据结构

type InjectArg = {api: APi,//apirule: Rule[],//生成规则self: Rule,//当前生成规则option: Object,//全局配置inject: Any,//自定义注入的参数args: any[],//原始回调参数
}

向事件中注入fApi和自定义数据的示例

 

<template><form-create :rule="rule" v-model:api="fApi" :option="options" @prefix1-change="change"/>
</template><script>
export default {data() {return {fApi: {},options: {onSubmit: (formData) => {alert(JSON.stringify(formData))},wrap: {labelCol: {span: 4}}},rule: [{type: 'input',field: 'inputField2',title: 'change 事件',emit: [{name: 'change',inject: ['自定义参数,数据类型不限']}],emitPrefix: 'prefix1',},{type: 'input',field: 'inputField',title: 'blur 事件',inject: true,on: {blur: this.blur}},]}},methods: {change(inject) {alert(`change: "${inject.self.value}", inject:"${inject.inject}"`)},blur(inject) {alert(`blur: "${inject.self.title}"`)}}
}
</script>

全局开启​

事件注入也可以通过表单配置项injectEvent:true开启,对所以事件和原生事件开启事件注入

<template><form-create :rule="rule" v-model:api="fApi" :option="options" @prefix1-change="change"/>
</template><script>
export default {data() {return {fApi: {},options: {onSubmit: (formData) => {alert(JSON.stringify(formData))},wrap: {labelCol: {span: 4}},//全局开启injectEvent: true},rule: [{type: 'input',field: 'inputField2',title: 'change 事件',emit: ['change'],emitPrefix: 'prefix1',},{type: 'input',field: 'inputField',title: 'blur 事件',on: {blur: this.blur}},]}},methods: {change(inject) {alert(`change: "${inject.self.value}", inject:"${inject.inject}"`)},blur(inject) {alert(`blur: "${inject.self.title}"`)}}
}
</script>

 

事件注入功能可以向事件中注入fApi,rule等参数

开启事件注入后会给回调事件参数首位增加注入参数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hjln.cn/news/34552.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

【最新】别再发邮件了,必须在开源之夏后台申请,50%的人竟然都没有报名成功!

引言 近期我们注意到很多学生朋友通过邮件向导师申请报名,请注意!!!​这是无效的,请必须通过“开源之夏”官方后台申请报名,请仔细参考这篇【报名攻略】 所以,我们特此举办这次宣讲会,目的是向所有感兴趣的学生详细介绍Apache DolphinScheduler社区在开源之夏中提供的项…

Flink富函数

富函数是DataStream API提供的函数接口,Flink的函数都有它的Rich版本,它与其他函数不同的是,富函数可以获取到运行环境上下文,初始化参数,拥有生命周期方法等,可通过它进行自定义复杂功能。我们常见的如RichMapFunction、RichFilterFunction等。富函数的生命周期主要通过…

C#如何用最简单方法调用Python?

最近有群友咨询C#如何调用Python?小编尝试Python.NET过程中遭遇的版本兼容性和环境配置难题,小编决定寻找一个更为简单、稳定且对初学者友好的解决方案。小编搜索一番,除了Python.NET之外,还有其他途径能够帮助我们轻松地在C#项目调用Python脚本,那就是通过命令行调用,使…

创建你的-Mysql-数据库-全-

创建你的 Mysql 数据库(全)原文:zh.annas-archive.org/md5/853FEC9D976A75004408D5A9A661EDD8 译者:飞龙 协议:CC BY-NC-SA 4.0前言 1995 年发布的 MySQL 已成为最受欢迎的开源数据库系统。MySQL 和 phpMyAdmin 的普及使得许多非 IT 专家能够使用 MySQL 后端构建动态网站。…

【Unreal】虚幻GAS系统快速入门

【USparkle专栏】如果你深怀绝技,爱“搞点研究”,乐于分享也博采众长,我们期待你的加入,让智慧的火花碰撞交织,让知识的传递生生不息!前言最近在用UE做单机ARPG的战斗系统,研究了一下GAS。本文主要介绍GAS各个模块的用途,以及特定功能的多种实现方法。为了让大部分人能…

[CISCN 2022 初赛]online_crt crash漏洞引起的命令执行

几天没做题了,有点生疏。看题吧。题目标签说是CVE-2022-1292,去看看。意思就是在$fname处构造恶意文件名导致的命令注入,而且前面没有认真过滤,也就是文件名命令执行。 看看题目源码:点击查看代码 import datetime import json import os import socket import uuid from …

解锁你的数据库:JPA和Hibernate的乐观锁与悲观锁

哈喽,大家好,我是木头左!引言 在当今的软件开发领域,数据库操作是不可或缺的一部分。然而,随着并发操作的增加,如何正确地处理并发问题是每个开发者都需要面对的挑战。本文将深入探讨JPA(Java Persistence API)和Hibernate这两种ORM(对象关系映射)工具中的乐观锁和悲…

易基因:WGBS+ChIP-seq等表观组分析揭示FOXM1 是抗肿瘤免疫应答的关键调控因子

大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 食管癌是一种常见的恶性肿瘤,包括两种主要的组织学亚型:食管鳞状细胞癌(squamous cell carcinoma,ESCC)和食管腺癌(adenocarcinoma,EAC)。近两年来对抗肿瘤免疫应答机制的理解得到了显著提高,免疫检查…