无代码平台之自定义组件

无代码平台就是一个一个的组件当成积木，通过拖拉拽的方式搭建起来，构建自己的应用。前端有前端组件，如果不够自己增加组件，后端有后端的组件，如果不够自己增加组件，用统一的组件间传参、组件穿透、前后端穿透等技术，组建出自己希望的个性化功能，和复杂的业务场景。

在使用过程中，如果遇到客户特殊的需求，无法使用现有的平台组件实现，可以通过自定义组件来实现客户的需求。

今天我们简单的制作一个自定义组件，完成一个简单的demo。

1、编写自定义组件

进入自定义组件菜单

点击新增按钮，弹出新建自定义组件的画面，其中自定义组件体中已经内置了自定义组件需要的几个元素：template、data、props、methods，以及methods下的created、mounted、getConfigData、resetConfigData等定义；

即：自定义组件的格式和Vue是一致的，html内容写在template中，属性内容写在data中，组件的钩子函数created、mounted等。

let template = `
自定义组件
`;
let data = {
   var1: ''
};
let props = [];
let methods = {
   created() {
   },
   mounted() {
   },
   getConfigData(id) {
   },
   resetConfigData(config) {
   }
};

我们修改一下自定义组件的内容：名称设置为“简单查询组件”，组件的功能为：

1、画面中包含一个输入框、一个查询按钮

2、点击查询按钮，判断输入框是否输入，如果未输入，则提示必须输入

3、如果已经输入，则向父组件发出事件请求，并弹出一个简单的弹出框，弹出框中包含两个按钮

组件体内容如下：

let template = `
 
   自定义组件：
   
   查询
   
      

         保存
         关闭
      
   
`;
let data = {
   var1: '',
   search: '',
   dialogVisible: false
};
let props = [];
let created = {
};
let methods = {
   //此函数用于外部父窗口调用当前组件的返回值
   getConfigData(id) {
      if (id) {
         if (this[id]) {
            return this[id]
         }else{
            return null;
         }
      }else{
         return {
            var1: this.var1,
            search: this.search
         }
      }
   },
   //此函数用于为组件设置属性
   resetConfig(config) {
      if (config.var1) {
         this.var1 = config.var1
      }else{
         this.var1 = '未设置'
      }
      if (config.search) {
         this.search = config.search
      }
   },
   clickme() {
      if (!this.search) {
         this.$message.error('请输入查询内容');
         return;
      }
      this.$emit('change', this.search, 'search')
      this.dialogVisible = true
   }
};

保存后，在自定义组件列表中启用自定义组件。

2、在其他页面中使用该自定义组件

在画面配置中添加元素类型为“diycom”的组件

为自定义组件添加JS函数

函数内容为：

1、获取列表中已经选择的行数

2、获取自定义组件中输入框的输入内容

3、重新将自定义组件中输入框内容+已经选择的行数+“条记录”，赋值给自定义组件的输入框

查看效果：

搞定！

感谢关注！！