甘肃龙网

  1. 首页 > 生活 > >

表单自动生成器form( 二 )

生活百科form


在线示例
以下是 from- 的功能演示和参考案例
案例组件示例功能示例
挂载组件
全局挂载
Vue.use(formCreate);
局部挂载
//Vue 组件{components: {formCreate: formCreate.$form()}}
自定义组件
通过 form- 生成的组件需要先通过以下方式挂载后才可以生成.必须在挂载之前挂载所有需要生成的自定义组件
全局挂载
//自定义组件Vue.component(TestComponent);//或者formCreate.component(TestComponent.name, TestComponent);Vue.use(formCreate);
局部挂载
//自定义组件formCreate.component(TestComponent.name, TestComponent);//Vue 组件{components: {formCreate: formCreate.$form()}}
绑定事件
例如给i-input组件添加on-事件,事件名称参考Input
{type:'input',field: 'test',title: 'test',value: '',on: {'on-change': function(){console.log('value 发生变化');}}}
通过 emit 方式绑定事件
只支持在组件模式下
//rule[{type:'input',field: 'test',title: 'test',value: '',emit: ['on-change']}]
事件名称为${field}-${}

通过自定义事件前缀
//rule[{type:'input',field: 'test',title: 'test',value: '',emit: ['on-change'],emitPrefix: 'xaboy',}]
事件名称为${}-${}

通过 on 方法绑定事件1.0.2+
//rule[{type:'input',field: 'test',title: 'test',value: '',emit: ['on-change'],emitPrefix: 'xaboy',}]
$f.on('xaboy-on-change',function(){//TODO})
向事件中注入$f和自定义参数
//rule[{type:'input',field: 'test',title: 'test',value: '',emit: [{name: 'on-change',inject: ['自定义参数,数据类型不限']}],emitPrefix: 'xaboy',}]

向事件中注入参数后,事件会额外增加一个参数

表单自动生成器form

文章插图
//未注入{onChange: function(val){}}//注入后{onChange: function(inject, val){}}
参数的数据结构
{$f:Object,//apirule:Array,//生成规则self:Object,//当前生成规则option:Object,//全局配置inject:Any,//自定义注入的参数}
参数注入也可以通过全局配置项:true开启
自定义布局
通过设置生成规则的col配置项可以实现组件的布局
iview Col|-ui Col
示例1:
表单自动生成器form

文章插图
[{type:'input',field:'test-1',title:'col-12',value:'',col:{span:12}},{type:'input',field:'test-2',title:'col-12',value:'',col:{span:12}}]
示例2:
示例中使用的是
当没有设置col时默认为{span:24}
表单自动生成器form

文章插图
[{type: 'el-row',native: true,children: [{type: 'el-col',props: {span: 12},children: [{type:'datePicker',title: '活动日期',field: 'section_day',value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],props:{type:'datetimerange'}},{type:'timePicker',title: '活动时间',field: 'section_time',value: ['11:11:11', '22:22:22'],props:{isRange: true,placeholder: "请选择活动时间"}},]},{type: 'el-col',props: {span: 12},children: [{type:'inputNumber',title: '排序',field: 'sort',value: 0,props:{precision: 2},col:{span: 12},validate: [{require: true, type: 'number', min: 10}]},{type:'colorPicker',title: '颜色',field: 'color',value: '#ff7271',props:{hue: true,format: 'hex'},col:{span: 12}},]}]}]


上一篇：怎么想云服务器传输文件,怎么想云服务器传输文件

下一篇：word文档如何自动生成目录