资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/动态生成form表单,不再为表单烦恼

动态生成form表单,不再为表单烦恼

kamushin233 / 2938人阅读

摘要：具有数据收集校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框单选框输入框下拉选择框等表单元素以及省市区三级联动时间选择日期选择颜色选择滑块评分框架树型文件图片上传等功能组件。

form-create

具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。

</>复制代码 
  1. 1.4.5版本已支持 iview3

Github | Gitee | Npm | form-create 文档

图例 demo

安装 
</>复制代码 
  1. npm install form-create

OR

</>复制代码 
  1. git clone https://github.com/xaboy/form-create.git
  2. cd form-create
  3. npm install
运行 
</>复制代码 
  1. npm run dev

OR

双击打开 demo/index.html

引入

浏览器:

</>复制代码

NodeJs:

</>复制代码 
  1. import Vue from "vue";
  2. import iView from "iview";
  3. import "iview/dist/styles/iview.css";
  4. import formCreat from "form-create"
  5. //三级联动数据,不用可以不引入
  6. import "form-create/district/province_city_area.js"
  7. //示例规则,实际使用中不需要引入
  8. import "form-create/mock.js"
  9. Vue.use(iView);
  10. Vue.use(formCreat)
Demo

使用 maker 生成器生成: demo

使用 json 生成: demo

各组件生成: demo

三种模式创建表单 
</>复制代码 
  1. 说明:
  2. </>复制代码 
    1. mock() 为表单生成规则
    2. root 为表单插入节点
    3. $f 为表单实例
标签模式 
</>复制代码 
  1. 标签模式下 rule 规则发生变化会实时动态渲染表单
</>复制代码 
  2.     
</>复制代码 
  1. let rules = mock();
  2. new Vue({
  3.     el:"#app1",
  4.     data:{
  5.         //表单生成规则
  6.         rule:rules,
  7.         //组件参数配置
  8.         option:{
  9.             //显示表单重置按钮
  10.             resetBtn:true,
  11.             //表单提交事件
  12.             onSubmit:function (formData) {
  13.                 //formData为表单数据
  14.                 //按钮进入提交状态
  15.                 this.$f.btn.loading();
  16.                 //重置按钮禁用
  17.                 this.$f.resetBtn.disabled();
  18.                 //重置按钮恢复正常
  19.                 //this.$f.resetBtn.disabled();
  20.                 //按钮进入可点击状态
  21.                 //this.$f.btn.loading(false);
  22.             }
  23.         },
  24.         //初始化变量
  25.         $f: {},
  26.         model: {}
  27.     },
  28.     mounted:function () {
  29.         //获取表单api
  30.         this.$f = this.$refs.fc.$f;
  31.         //获取双向数据绑定的数据规则
  32.         this.model = this.$f.model();
  33.     }
  34. });
构造方法 
</>复制代码 
  2.     
</>复制代码 
  1. let rules = mock();
  2. new Vue({
  3.     el:"#app2",
  4.     data:{
  5.         //初始化变量
  6.         $f:{},
  7.         model:{}
  8.     },
  9.     mounted:function () {
  10.         //表单插入的节点
  11.         const root = document.getElementById("form-create");
  12.         //$f为表单api
  13.         this.$f = this.$formCreate(
  14.             //表单生成规则
  15.             rules,
  16.             //组件参数配置
  17.             {
  18.                 el:root,
  19.                 //显示表单重置按钮
  20.                 resetBtn:true,
  21.                 //表单提交事件
  22.                 onSubmit:function (formData) {
  23.                     //formData为表单数据
  24.                     //按钮进入提交状态
  25.                     this.$f.btn.loading();
  26.                     //重置按钮禁用
  27.                     this.$f.resetBtn.disabled();
  28.                     //重置按钮恢复正常
  29.                     //this.$f.resetBtn.disabled();
  30.                     //按钮进入可点击状态
  31.                     //this.$f.btn.loading(false);
  32.                 }
  33.         });
  34.         //获取双向数据绑定的数据规则
  35.         this.model = this.$f.model();
  36.     }
  37. })
全局方法 
</>复制代码 
  2.     
</>复制代码 
  1. //表单插入的节点
  2. var root = document.getElementById("form-create"),rules = mock();
  3. //初始化变量
  4. var $f = {},model = {};
  5. //$f为表单api
  6. $f = window.formCreate(
  7.     //表单生成规则
  8.     rules,
  9.     //组件参数配置
  10.     {
  11.         el:root,
  12.         //显示表单重置按钮
  13.         resetBtn:true,
  14.         //表单提交事件
  15.         onSubmit:function (formData) {
  16.             //formData为表单数据
  17.             //按钮进入提交状态
  18.             $f.btn.loading();
  19.             //重置按钮禁用
  20.             $f.resetBtn.disabled();
  21.             //重置按钮恢复正常
  22.             //$f.resetBtn.disabled();
  23.             //按钮进入可点击状态
  24.             //$f.btn.loading(false);
  25.         }
  26. });
  27. //获取双向数据绑定的数据规则
  28. model = $f.model();

PHP 表单生成器

GPU云服务器 云服务器 form表单校验 form表单插件 form表单判断 form表单提交

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92965.html

相关文章

  • typecho插件编写教程3 - 保存配置

    摘要：完善信息，使其更接地气插件安装成功，请进入设置填写准入密钥插件卸载成功如何保存配置准入密钥在哪里保存当然是数据库了。 此文原本发表于我的博客 老高的技术博客 ，欢迎和老高交流！ 上一节我们制作了一个裸插件，下面我们开始让我们的插件开始工作！ 完善方法 两个方法 我们实现activate和deactivate方法 php public static function...

    HmyBmny 评论0 收藏0

  • 使用form-create轻松生成高品质的form表单[附原理图]

    摘要：目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用可快速便捷的生成日常开发中所需的各种表单。可通过后端返回生成规则，进行渲染。 form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。 已兼容iview2.和iview3.版本 Github...

    phodal 评论0 收藏0

  • 自定义表单生成器form-create v2介绍

    摘要：介绍是一个可以通过生成具有动态渲染数据收集验证和提交功能的表单生成器。并且支持生成任何组件。结合内置种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。 文档 | git...

    lufficc 评论0 收藏0

  • vue动态生成表单组件vue-form-maker

    摘要：项目地址简介动态生成表单组件可以根据数据配置表单使用的库是在里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用的函数要做这一个组件其实并不难看一下官方示例再找个组件库差不多就能写出来如果对项目有兴趣可以或克隆项目自行研究 项目地址 简介 Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明所以要根...

    cjie 评论0 收藏0

  • 长期更新，记录一下近期工作中涉及到的内容（DvaJs Ant Design）

    摘要：表单域表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发，请尝试使用将下拉弹层渲染节点固定在触发器的父元素中。 DvaJs dispatch在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects...

    MadPecker 评论0 收藏0

发表评论

登陆后可评论

0条评论

kamushin233

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<