代码实现新增自定义组件

用代码方式新增一个自定义组件的方法

第一步：显示在拖动候选栏里

首先打开 src/components/componentsConfig.js 文件，所有组件的基础配置都是在这个文件里写的。

在这个文件里新增一段固定格式的JSON，包含新组件的信息

options 里的属性根据组件的要求按需整改。

保存后打开页面就可以发现已经添加到 基础字段 里了

虽然可以拖动到设计器中，但是不会有任何显示，因为我们没有定义组件的实现

第二步：编写组件实现

首先新建一个vue文件：src/components/jeecg/JeecgInput.vue，暂时先写上下图的这些代码

然后在 src/components/WidgetFormItem.vue 文件里引用一下

并且在页面里同步引用，加个 v-if 判断，只有当当前组件是 jeecg-input 的时候才显示

再回到页面上，就可以看到能正常显示出来了

但是点击预览仍然是显示不出来组件的，因为设计和预览用的是两个不同的组件

我们还需要打开 src/components/GenerateFormItem.vue，用通用的方式再引用一下刚刚新建的组件

第三步：用户自定义组件属性

组件的属性可以在 src/components/WidgetConfig.vue 文件里整改，打开这个文件，新增以下代码

回到页面里就可以看到效果

现在我们给 defaultValue 和 placeholder 这两个属性开放给用户修改

效果如下：

还需要组件内部配合修改下，修改成下图这样

在 src/components/WidgetFormItem.vue 和 src/components/GenerateFormItem.vue 组件里也要修改一下传值

点击预览就可以看到效果了