1. VForm支持Vue 3吗?

VForm支持Vue 2,也支持Vue 3,对应两个版本——VForm 2、VForm 3。

2. VForm开源版本能免费商用吗?

能,必须能。

3. VForm支持哪些UI库?

VForm 2支持element-ui,VForm 3支持element-plus。
根据实测及用户反馈,VForm也可以用于ant design vue项目,只是视觉效果稍有一点差别。

4. VForm依赖了哪些开源项目或第三方组件?有没有侵权风险?

VForm依赖Vue、element-ui(或element-plus)、Vue.Draggable、Ace Code Editor开源项目,其中Vue、Element、Vue.Draggable均使用MIT协议,Ace Code Editor使用BSD协议,除此以外VForm的代码均为自主研发,因此使用VForm不存在侵权风险。

5. 可以隐藏VForm头部LOGO吗?可以修改VForm产品名称吗?

毕竟源码都开放了,是没办法禁止的。顺带提一句,我们为Pro版用户提供了隐藏LOGO和修改产品名称的便利。
但是根据VForm的许可条款,禁止用户经过简单包装后将VForm声称为自有产品或销售VForm开源代码获利。

6. 如何开发自定义组件?二次开发文档在哪里?二次开发文档链接打不开?

开发自定义组件看二次开发文档,从群公告进入。
二开文档在每个微信交流群的群公告可见,二开文档也必须从群公告链接进入才能查看。

7. 内置组件属性太多,怎么隐藏?

打开widgetsConfig.js,找到相应组件,注释掉不想要的属性。

8. 内置组件属性不够用,如何增加?

按以下步骤操作:
1. 修改widgetsConfig.js文件,找到对应组件,增加新属性xxx;
2. 在property-editor目录下增加新属性对应的属性编辑器xxx-editor.vue;
3. 在propertyRegister.js文件中注册属性和属性编辑器的映射关系;
4. 修改组件源码,将新增属性跟组件进行绑定;
5. 开发模式运行,测试有无问题。

9. 表单模板在哪里配置?

templatesConfig.js文件。

10. 如何在纯内网环境部署VForm?

主要有两个地方需要私有部署:

  1. 将config.js文件中的远端资源部署在内网环境;
  2. 将templatesConfig.js文件中的远端资源部署在内网环境。

    11. 如何调用表单组件的API方法?

    一般有两种途径:

  3. 通过ref属性获取到v-form-render组件的对象实例(假定为 vformRef),然后 vformRef.方法名称调用;

  4. 已经获得表单内某组件实例的情况,比如nameInputRef,通过nameInputRef.getFormRef()获取到v-form-render对象实例(假定为 vformRef),然后 vformRef.方法名称调用。

    12. 如何调用容器组件、字段组件的API方法?

    一般有两种途径:

  5. 在容器组件、字段组件的交互事件中,this指向组件自身,通过this.方法名称调用;

  6. 已经获得v-form-render对象实例的情况下,假定为vformRef,通过vformRef.getWidgetRef(组件名称)获得组件实例(假定为xxxWidget),然后通过xxxWidget.方法名称调用。

    13. 表单内组件如何给VForm外部组件发送事件?

    首先获取到v-form-render组件实例,然后调用$emit方法即可。

    14. 表单内组件如何调用VForm外部组件的方法?

    当v-form-render组件创建完成后,可在父组件的onMounted事件中调用addEC()方法增加外部组件引用,之后在VForm表单内部便可以调用getEC()获取到外部组件。可全文搜索本知识库“addEC”或“getEC”关键词,查看具体使用方法。

    15. 选项字段明明赋值了,为什么不选中相应选项?

    通常情况是赋值的数据类型跟选项的value值类型不一致,比如赋值类型为number,但value类型为string。

    16. 为什么调用disableForm()方法禁用表单不生效?

    可能是因为表单尚未构造完成,用this.$nextTick包裹一下即可解决:

    this.$nextTick(() => { vformRef.disableForm() })

17. 为什么调用setFormData()方法不能正确设置表单数据回显?

可能是因为表单尚未构造完成,解决方法同上。

18. 为什么字段组件明明有输入值还是通不过必填校验?

可能是因为表单构建过程中出现异常,比如表单json是通过异步请求从后端获取,然后通过form-json属性传递给v-form-render组件则可能出现这个问题。
异步请求获取表单json,应调用v-form-render组件的setFormJson方法来构造表单。

19. 移动端H5可以使用VForm吗?

可用使用,但element-ui/element-plus并非针对移动端设计,有些UI细节有待优化。

更新提示:如果需要更完善地支持移动端,可以基于Vant、NutUI等移动端组件库开发自定义组件。

20. 小程序可以使用VForm吗?

可以用H5(WebView)的方式嵌入小程序。

21. Uniapp可以使用VForm吗?

VForm是一个Vue组件,可以像其他Vue组件一样在Uniapp中使用,可打包输出Web/H5(不支持打包输出小程序)。

22. 为什么表单设计器通过插槽配置了自定义按钮却不显示?

  1. 因为工具按钮条显示宽度不够,新增的自定义按钮被遮挡了,可通过设置toolbarMaxWidth参数调整工具按钮条显示宽度,具体设置方式请搜索本知识库“toolbarMaxWidth”;
  2. 另外一个原因,低于2.6版本的Vue不支持#具名插槽语法,改成slot="default"即可。

    23. 为什么使用富文本组件不能正常显示、报错?

    VForm 2版本为压缩打包文件大小,富文本组件采用了懒加载方式,解决方法点此进入
    VForm 3版本的富文本组件不再采用懒加载方式,故不会出现此问题。

    更新提示:VForm 2从2.2.7版本开始,富文本组件改为正常加载,此问题已不存在,副作用是打包文件稍变大。

24. 为什么官网DEMO演示版本使用console.log语句却没有任何输出?

DEMO演示版为VForm的生产环境打包版本,为防止输出VForm内部调试信息,该版本禁用了console.log语句,请使用console.info语句打印调试信息。

25. 当VForm集成到Vue项目中后,VForm交互事件是否支持使用项目中预先配置好的axios发送请求?

完全可以。VForm交互事件可以使用挂载到window上的全局对象,因此在引入VForm组件后(需修改main.js文件)将项目中预先配置好的的axios挂载到window,如下所示:
window.myAxios = axios // 此处myAxios名称可自定义
然后在VForm交互事件中用myAxios即可使用项目预置的axios对象。

26. 为什么表单设计器的工具按钮条不显示?

可能是因为屏幕分辨率太低,工具按钮条显示区域宽度不够,强制换行后被上层元素遮挡了。
可通过设置toolbarMaxWidth参数调整工具按钮条显示宽度,具体设置方式请搜索本知识库“toolbarMaxWidth”。

27. 为什么表单设计器集成到其他项目中样式错乱了?如何复位表单设计器样式?

当设计器嵌入其他项目(如Admin Web类框架),设计器的样式可能会被外部样式污染,导致显示错位、美观度降低。出现这种情况时,只需在v-form-designer之外包裹一个div容器,并在该div上进行样式复位。

具体需要复位哪些样式,可跟VForm Demo演示版本进行对比找出。


998. 如何快速找到问题的答案?

提炼出问题的核心关键词,用关键词搜索本知识库,比如:
image.png

999. 以上都没有我碰到的问题及答案,如何解决?

请在本文下方的评论中添加你的问题,请如实、详尽描述问题细节,以便解答。
谢谢!