使用form-create动态生成vue自定义组件和嵌套表单组件


Posted in Javascript onJanuary 18, 2019

使用form-create动态生成vue自定义组件和嵌套表单组件

[github]| [说明文档]

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;

示例

使用form-create动态生成vue自定义组件和嵌套表单组件

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.template

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

生成

Maker

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

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

Json

let rule = [
 {
  type:'template',
  template:'<i-button :loading="loading">{{text}}<i-button>',
  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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript中slice函数用法实例分析
Jun 08 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
jquery层次选择器的介绍
Jan 18 #jQuery
js实现图片放大并跟随鼠标移动特效
Jan 18 #Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 #Javascript
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
React性能优化系列之减少props改变的实现方法
Jan 17 #Javascript
vue 项目接口管理的实现
Jan 17 #Javascript
You might like
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
老生常谈Python基础之字符编码
2017/06/14 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python与字符编码问题
2019/05/24 Python
pandas数据拼接的实现示例
2020/04/16 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
英语感恩演讲稿
2014/01/14 职场文书
生物学学生自我评价
2014/01/17 职场文书
客服部班长工作责任制
2014/02/25 职场文书
装修设计师求职信
2014/02/26 职场文书
支部组织生活会方案
2014/06/10 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
MySQL深分页问题解决思路
2022/12/24 MySQL