vue 快速生成组件的指令_ant-design-vue表单生成组件form-create快速上手

介绍

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

安装

CDN 引入

NPM

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @form-create/ant-design-vue

引入

import formCreate from '@form-create/ant-design-vue'

支持

功能

- 持支持3种 UI 框架

- 支持自定义表单组件

- 可生成任何Vue组件

- 自带数据验证

- 组件插槽设置

- 通过 JSON 生成表单

- 通过 Maker 生成表单

- 强大的API，可快速操作表单

- 双向数据绑定

- 事件扩展

- 事件注入

- 局部更新

- 数据验证

- 栅格布局

- 内置组件17种常用表单组件

生成

export default {

data () {

return {

//实例对象

fApi:{},

//表单生成规则

rule:[

{

type:'input',

field:'goods_name',

title:'商品名称'

},

{

type:'datePicker',

field:'created_at',

title:'创建时间'

}

],

//组件参数配置

option:{

//表单提交事件

onSubmit:function (formData) {

alert(JSON.stringify(formData));

}

}

};

}

};

数组组件/组件嵌套

可以通过group组件实现组件数组,嵌套对象功能

{

type:"group",

title:"标签",

field:" label",

value:[],

props:{

min:1,

max:5,

rule:{

type:'input',

field:'input',

props:{disabled:false},

validate:[{required:true}]

}

},

validate:[

{required:true, type: 'array', min: 1, message: '最少添加1个标签'}

]

}

Control 配置项

可以通过control配置项实现通过组件的值控制其他组件是否显示

当用户选中包邮选项后会自动显示number组件

{

type:"radio",

title:"是否包邮",

field:" is_postage",

value:0,

options: [

{value: 0, label: '不包邮', disabled: false},

{value: 1, label: '包邮', disabled: false},

],

control:[

{

value:1,

rule:[

{

type: 'number',

field: 'postage_money',

title: '满额包邮',

value: 0

},

]

}

]

}

实现Ant Design 自定义表单组件

Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

Vue表单和组件

一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素.

vue表单和组件使用

表单:

ant design pro 表单

1.Input Enter事件 onKeyUp = (e) => ...

ant design 自定义表单验证大全

需求是 账号名可以是手机号也可以是邮箱 要做手机号和邮箱的验证,官网的那个验证规则不匹配  怎么自定义验证规则?  一:组件部分

基于Ant Design Vue封装一个表单控件

开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

文档驱动 —— 表单组件(五)：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。

源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

Form表单验证组件

Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

第四节：Vue表单标签和组件的基本用法，父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧.

随机推荐

airflow 部署

环境 : ubuntu 14.04 LTS python 2.7 script: 设置环境变量: export AIRFLOW_HOME=~/airflow 安装相关依赖包: sudo apt-get ...

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(二) 之 ChatServer搭建，连接服务器，以及注意事项。

上篇:ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取) 上一篇我们已经完成了初步界面的搭建工作,本篇将介绍IM的核心内容 ...

PostScript的简单例子-用粗线画一个圆

一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

从数据库读取数据后显示成html标签

也许很多人从数据库中读的数据是不需要数据成html标签的,但是也许有一天你们会发现当我们需要输出成html标签时编译器却自动帮我们输出成字符串了这是我们可以这样来 方法1: 最常用的方法,使用JS或J ...

Python杂项

一. Python执行系统命令 Python可以使用system和popen来执行系统命令,使用时需要import os, 传入的参数都为一个字符创,不过这两者之间有些差异. os.system(cm ...

10.2 Vue 环境安装

Vue 环境安装 环境准备  nodejs 下载安装  https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...

[每天解决一问题系列 - 0009] File System Redirector

问题描述: 在64位操作系统下,知道Wow64是干什么的,但一直不知道是怎么工作的 相关解释: https://msdn.microsoft.com/en-us/library/windows/des ...

python 创建txt并且写入做追加

import os def create_str_to_txt(self,date,str_data): """ 创建txt,并且写入 ""&quot ...

User Agent 里的各个字段含义

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.69 ...