使用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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
js实现新年倒计时效果
Dec 10 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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调用Oracle存储过程
2006/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php上传文件的增强函数
2010/07/21 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
VSCode launch.json配置详细教程
2020/06/18 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
大学教师师德师风演讲稿
2014/08/22 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
深入浅析Django MTV模式
2021/09/04 Python