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_03_javascript全局观
Oct 11 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
JQuery性能优化的几点建议
May 14 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
剖析Angular Component的源码示例
Mar 23 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 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语法(4)
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
javascript 对象的定义方法
2007/01/10 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python字符串的常用操作方法小结
2016/05/21 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python实现汇率转换操作
2020/05/03 Python
Python 远程开关机的方法
2020/11/18 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
优秀学生事迹材料
2014/02/08 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
协议书范本
2014/04/23 职场文书
厂区绿化方案
2014/05/08 职场文书
幸福家庭标语
2014/06/27 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
入股合作协议书
2014/10/12 职场文书
信用卡催款律师函
2015/05/27 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL