使用form-create动态生成vue组件,支持json格式

happyhuangjinjin 发布于2019-08-23 14:48 / 3508人阅读

摘要：说明文档示例商品名称商品加个创建时间是否显示显示不显示通过建立一个虚拟的方式生成自定义组件生成上面的代码是通过生成器动态生成一个正在加载的按钮组件上面的代码是通过方式动态生成一个按钮组件修改可以通过一下两种方式动态修改组件的配置项通

[github] | [说明文档]

示例

let rule = [
  {
    type:"row",
    children:[
      {
        type:"i-col",
        props:{
          span:12
        },
        children:[
          formCreate.maker.input("商品名称","goods_name","iphone"),
          formCreate.maker.number("商品加个","goods_price",8688)
        ]
      },
      {
        type:"i-col",
        props:{
          span:12
        },
        children:[
          formCreate.maker.dateTime("创建时间","create_at"),
          formCreate.maker.radio("是否显示","is_show").options([
            {value:1,label:"显示"},
            {value:0,label:"不显示"}
          ])
        ]
      }
    ]
  }
]

maker.create

通过建立一个虚拟 DOM的方式生成自定义组件

生成

Maker

let rule = [
  formCreate.maker.create("i-button").props({
    type:"primary",
    field:"btn"
    loading:true
  })
]
$f = formCreate.create(rule);

上面的代码是通过 maker 生成器动态生成一个正在加载的 iview 按钮组件

Json

let rule = [
  {
    type:"i-button",
    field:"btn"
    props:{
        type:"primary",
        field:"btn",
        loading:true
    }
  }
]
$f = formCreate.create(rule);

上面的代码是通过json方式动态生成一个iview 按钮组件

修改

可以通过一下两种方式动态修改组件的配置项

通过rule修改组件生成规则

rule[0].props.loading = false;

通过$f.component()方法获取组件的生成规则并修改

$f.component().btn.props.loading = false;

maker.template

通过模板的方式生成自定义组件,maker.createTmp方法是该方法的别名

生成

Maker

let rule = [
  formCreate.maker.template("{{text}}",new Vue({
    data:{
      loading:true,
      text:"正在加载中..."
    }
  }))
]

上面的代码是通过 maker 生成器动态生成一个正在加载的 iview 按钮组件

Json

let rule = [
  {
    type:"template",
    template:"{{text}}",
    vm:new Vue({
      data:{
        loading:true,
        text:"正在加载中"
      }
    })
  }
]
$f = formCreate.create(rule);

上面的代码是通过Json方式动态生成一个iview 按钮组件

修改

可以通过一下两种方式动态修改vm组件内部的值

通过rule获取自定义组件的vm并修改

rule[0].vm.text = "加载完毕";
rule[0].vm.loading = false;

通过$f.component()方法获取自定义组件的vm并修改

$f.component().btn.vm.text = "加载完毕";
$f.component().btn.vm.loading = false;

GPU服务器云服务器 js将数据动态生成json js动态生成格式数据类型 vue组件 vue组件开发

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

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

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

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

phodal 2019-08-23 14:13 评论0 收藏0
自定义表单生成器form-create v2介绍

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

lufficc 2019-08-23 18:16 评论0 收藏0
动态生成form表单,不再为表单烦恼

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

kamushin233 2019-08-22 14:53 评论0 收藏0
PHP快速生成现代化form表单，就是好用

摘要：表单生成器，使用快速创建现代化的表单，包含复选框单选框输入框下拉选择框等元素以及省市区三级联动时间选择日期选择颜色选择文件图片上传等功能。 form-builder PHP表单生成器，使用PHP快速创建现代化的form表单，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传等功能。 Github地址 | Composer地址 ...

notebin 2019-07-01 10:13 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0