自定义组件

组件标识

customComponents_xx

基础模板

<template>
  <div></div>
</template>

<script>
export default {
  props: {
    //组件信息
    record: {
      type: Object,
      required: true
    },
    //开发环境
    develop: {
      type: [Number, String],
      default: 1
    },
    //可视区域
    height: {
      type: Number,
      default: 100
    },
    //表信息(在视图组件(table)内有用)
    tableData: {
      type: Object,
      default: () => ({})
    },
    //表单数据(在表单组件(form)内有用)
    model: {
      type: Object,
      default: () => ({})
    },
    //是否是表单项
    isForm: {
      type: Boolean,
      default: false
    },
    //列表数据集(在列表组件(dataList)内有用)
    itemData: {
      type: Object,
      default: () => ({})
    },
    //是否嵌套在flex布局内部
    isFlexLayout: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    //执行事件
    executeEvent(e) {
      const func = e.functionName ? e.functionName : '';
      if (func && this[func] !== void 0) {
        this[func](e);
      } else {
        console.log('执行错误');
      }
    },
    //调用其他组件 (此为事例，可自定义)
    doEvent() {
      this.record.doEvent && this.record.doEvent({
        key: key,//组件key
        functionName: functionName,//组件方法
        data: data,//传入数据集
        source: this.record,
        callback: false,//是否回调(部分组件有效)
        callbackComponents: '', //回调组件key
        callbackFunction: '' //回调方法
      });
    },
    //数据字典
    getDictionary(e) {
      return this.$options.filters['dictData'](e);
    }
  },
  mounted() {
    //注册组件事件通讯
    if (this.develop == 2) {
      this.record.executeEvent = this.executeEvent;
    }
  }
}
</script>

组件通信

//调用其他组件 (此为事例，可自定义)
this.record.doEvent && this.record.doEvent({
  key: key,//组件key
  functionName: functionName,//组件方法
  data: data,//传入数据集
  source: this.record,
  callback: false,//是否回调(部分组件有效)
  callbackComponents: '', //回调组件key
  callbackFunction: '' //回调方法
});