使用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 相关文章推荐
js获取滚动距离的方法
May 30 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php上传图片类及用法示例
2016/05/11 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
详解Bootstrap插件
2016/04/25 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python3中str(字符串)的使用教程
2017/03/23 Python
python连接数据库的方法
2017/10/19 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Django forms组件的使用教程
2018/10/08 Python
python得到单词模式的示例
2018/10/15 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
董事长岗位职责
2013/11/30 职场文书
企业总经理岗位职责
2014/02/13 职场文书
《雪儿》教学反思
2014/04/17 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
高三语文教学反思
2016/02/16 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python