OpenDataV低代码平台添加自定义属性编辑

上一篇我们讲了如何在OpenDataV中添加自己的组件。为了让大家更快的上手我们的平台，这次我们再增加一个自定义属性编辑文章描述。我们先来看看OpenDataV中的属性编辑功能。当我们将一个组件拖到画布上，点击该组件，相应的属性编辑就会出现在页面右侧。在上一篇添加组件的文章中，我们有一个配置文件config.ts，配置了组件的样式和属性修改。对于每一个配置，我们设置类型FormType，如下：目前我们的FormType只支持几种固定方法，这里配置的类型会体现在属性编辑框中，比如FormType.COLOR，会是一个颜色选择框，FormType.SWITCH是一个切换按钮，那么如果需要使用FormType不支持的编辑方式怎么办呢？我们提供了FormType.CUSTOM自定义属性编辑类型，方便我们为自己的组件自定义属性编辑框。下面带大家一步步完成一个自定义属性编辑框。下面以ScrollTable组件为例，添加文件。在Table/ScrollTable目录下添加vue文件xxx.vue。名称可自由定义，内容如下：自定义属性编辑组件的编写要求如下：组件需要接收一个value（必填）和args（可选）属性组件必须给parent组件提供updateValue方法组件处理/type'constprops=defineProps<{value:RowTypeargs:any}>()constemits=defineEmits<{(e:'change',value:RowType)}>()constformData=reactive({高度:props.value.height||30,oddRowBGC:props.value.oddRowBGC||'#003B51',evenRowBGC:props.value.evenRowBGC||'#0A2732'})constchangeData=()=>{emits('change',formData)}value属性接收自定义编辑框的值，和普通属性一样，只是这里可以接收任何数据，数组，对象或者基本类型的数据，当我们渲染的时候在右侧的tribute编辑框，属性框中的值将通过该属性传递给当前组件。args是我们提供给组件的附加配置数据，可以根据需求使用。updateValue方法会将自定义属性编辑框中的值通过我们的数据流传递给当前编辑的组件。使用自定义编辑框在ScrollTable目录下的config.ts中添加如下配置：首先我们配置type为FormType.CUSTOM，showLabel的作用是在表单中显示标签。这主要是为了让我们自定义的编辑框有更大的渲染位置，在componentOptions中的componentType属性中配置组件对象，然后defaultValue就是ScrollTableForm组件中updateValue返回的值和value接收到的值。完成以上工作后，我们就可以在右侧的编辑框中查看自定义属性编辑框的效果了。由于样式和属性不同，添加自定义样式编辑需要一些特殊处理。我们将在下一篇文章中讨论它。在框架设计之初，我们就考虑了组件的动态注册、属性编辑和工具栏。增加，一方面让框架更加简洁，另一方面也降低了组件定制的难度。更新日志增加动态数据接口处理。添加了脚本处理请求数据。优化了一些编辑器错误。优化了用户体验。Vue3拖拽式低代码数据可视化平台OpenDataV低代码平台新组件流程