# 二次开发自定义新控件方法 > 针对vue-form-making-jeecg二次开发,新增一个输入框控件 ## 第一步:显示在拖动候选栏里 首先打开 `src/components/componentsConfig.js` 文件,所有组件的基础配置都是在这个文件里写的。 ![](https://img.kancloud.cn/6c/36/6c3621117f57e22f98aea95d04e6fa72_328x357.png) 在这个文件里新增一段固定格式的JSON,包含新组件的信息 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183418e85sopyts5e5stnx.png) `options` 里的属性根据组件的要求按需整改。 保存后打开页面就可以发现已经添加到 **基础字段** 里了 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183423snbyzj18m2ibsi0s.png) 虽然可以拖动到设计器中,但是不会有任何显示,因为我们没有定义组件的实现 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183424euh0v7374g4gbguq.png) ## 第二步:编写组件实现 首先新建一个vue文件:`src/components/jeecg/JeecgInput.vue`,暂时先写上下图的这些代码 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183439lyqji0iyrspqm5ia.png) 然后在 `src/components/WidgetFormItem.vue` 文件里引用一下 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183420i1a811s8c1s88wbg.png) 并且在页面里同步引用,加个 v-if 判断,只有当当前组件是 jeecg-input 的时候才显示 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183421vkt9lnl5waq4lnto.png) 再回到页面上,就可以看到能正常显示出来了 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183425ugykn1xvxzqvok8m.png) 但是点击预览仍然是显示不出来组件的,因为设计和预览用的是两个不同的组件 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183427in491h498f632bfa.png) 我们还需要打开 `src/components/GenerateFormItem.vue`,用通用的方式再引用一下刚刚新建的组件 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183428wugg3i3uh4h4lziu.png) ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183429h42c5kfhb55c82oc.png) ## 第三步:用户自定义组件属性 组件的属性可以在 `src/components/WidgetConfig.vue` 文件里整改,打开这个文件,新增以下代码 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183431wmfzffikg9f7ll77.png) 回到页面里就可以看到效果 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183432d4574x4c8888zxkk.png) 现在我们给 `defaultValue` 和 `placeholder` 这两个属性开放给用户修改 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183434oz3vjbsmtz2td36m.png) ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183436h1zg13zu3kv0t11l.png) 效果如下: ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183437hygcc4biymccxdao.png) 还需要组件内部配合修改下,修改成下图这样 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183440sfnuf2owfn3n1uvf.png) 在 `src/components/WidgetFormItem.vue` 和 `src/components/GenerateFormItem.vue` 组件里也要修改一下传值 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183441f7l2lq64heeva077.png) ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183444azy4b7y7gsye5yyy.png) 点击预览就可以看到效果了 ![img](http://www.jeecg.org/data/attachment/forum/201909/02/183443siobhvmh6mh6zyik.png)