vue动态配置模板 'component is'代码


Posted in Javascript onJuly 04, 2019

实现代码如下

<template>
 <div v-if='object.child'>
   <div v-for="(item,ix) in object.child" :key="ix">
    <component :is="item.xtype" v-if='item'
     :objectVlue="objectVlue"
     :object="item">
    </component>
   </div>
 </div>
</template>
<script>
export default {
 data() {
  return {
  };
 },
 props: {
  objectVlue:Object,
  object:Object,
 },
 created() {
  var itemType = require(`../units/unit-type.js`).default||{};//1.0
  this.object.child.forEach(item=>{
   if(item.fileName){
    item.objDefault = require(`@/scene/${this.$route.query.typeName}/config/${item.fileName}.js`);//2.0
   }   
  })

  this.object.child.forEach(item=>{//动态显示当前组件
   if(itemType[item.xtype])
   Vue.component(
    itemType[item.xtype].componentName,
    () => import(`@/components/info-collection/moudel/${itemType[item.xtype].fileName}`)
   )
  })
 }
};
</script>
//1.0=============unit-type.js所有模板配置文件 =======================
export default {
 tablePartMerge: {//表格合并模板xtype
   componentName: "tablePartMerge",//组件名称
   fileName: "table-partInfo-merge"//文件所在路径
 },
 tablePartInfo: {
   componentName: "tablePartInfo",
   fileName: "table-partInfo"
 },
 ueditorUnit: {
   componentName: "ueditorUnit",
   fileName: "unit-ueditor"
 },
 filesUnit: {
   componentName: "filesUnit",
   fileName: "unit-files"
 },
 approves: {  // 正文信息(审批记录)
   componentName: "approves",
   fileName: "approves-unit"
 },
 requiredDate:{ // 要求完成日期
  componentName: "requiredDate",
  fileName: "required-date"
 },
}
//2.0====== table-partInfo-merge.js =========
module.exports = {
 "columns":[{
  "id": "partNumber",
  "disabled": false,
  "name":"物料编码",
  "placeholder": "",
  "required": true,
  "selectDetail": [],
  "show": false,
  "span": 24,
  "width":"150",
  "xtype": "select"//组件内用的表格
 }]
}

//=============父级传过来的 object =======================
module.exports = [
  {
    title: '正文信息',
    name: '1',
    id:"",
    child:[
      {
        id:'partInfoData',//id
        show:'true',//是否显示
        fileName:'tablePartInfo',//文件路径名
        xtype:'tablePartMerge'//表格模块
      },
      {
        id:'mainAttachements',//文本编辑器
        show:'true',
        fileName:'',
        xtype:'filesUnit'
      },
      {
        id:'vivo_RequestCompletionTime',//时间选择模块
        show:'true',
        fileName:'',
        xtype:'requiredDate'
      },
      {
        id:'approves',
        show:'true',
        fileName:'approval',
        xtype:'approves'
      }
    ]
  }
];

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

Javascript 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
JS实现吸顶特效
Jan 08 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
Vue项目中ESlint规范示例代码
Jul 04 #Javascript
你或许不知道的一些npm实用技巧
Jul 04 #Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP Document 代码注释规范
2009/04/13 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python随机取list中的元素方法
2018/04/08 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
升职自荐信范文
2013/10/05 职场文书
作文批改评语大全
2014/04/23 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
情况说明书怎么写
2015/10/08 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
oracle索引总结
2021/09/25 Oracle