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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
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
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
js实现随机数小游戏
2019/06/28 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
linux下安装easy_install的方法
2013/02/10 Python
wxPython中文教程入门实例
2014/06/09 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python如何输出反斜杠
2020/06/18 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
施工工地安全标语
2014/06/07 职场文书
开展读书活动总结
2014/06/30 职场文书
公司踏青活动方案
2014/08/16 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
营业员岗位职责
2015/02/11 职场文书
关于python中模块和重载的问题
2021/11/02 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers