上一篇咱们讲到了怎么在OpenDataV中增加本人的组件，为了让大家更快的上手咱们的平台，这一次针对自定义属性编辑，咱们再来加一篇阐明。咱们先来看一下OpenDataV中的属性编辑性能。

当咱们拖动一个组件到画布中当前，点击组件，在页面的右侧就呈现了对应的属性编辑。在上一篇新增组件的文章中咱们有一个配置文件config.ts，配置了组件的款式和属性批改，其中对于每一项配置咱们设置了类型FormType，就像如下：

目前咱们的FormType只反对几种固定的形式，这里所配置的类型就会反馈到属性编辑框中，例如FormType.COLOR，就会是一个色彩抉择框，FormType.SWITCH就是一个开关按钮，那如果须要用到的编辑形式在FormType外面不反对怎么办呢？咱们提供了FormType.CUSTOM自定义属性编辑类型，这样就能够针对咱们本人的组件来定制属性编辑框。上面我带大家一步步实现一个自定义的属性编辑框。咱们以ScrollTable组件为例

减少文件

在Table/ScrollTable目录下减少vue文件xxx.vue，名称能够随便定义，内容如下：

<template>  <n-form :model="formData" size="small" label-placement="left">    <n-form-item label="行高度">      <n-input-number v-model:value="formData.height" @keypress.enter.prevent="changeData" />    </n-form-item>    <n-form-item label="背景色">      <div class="backcolor">        <n-color-picker v-model:value="formData.oddRowBGC" @complete="changeData" />        <span class="title">奇数行</span>      </div>      <div class="backcolor">        <n-color-picker v-model:value="formData.evenRowBGC" @complete="changeData" />        <span class="title">偶数行</span>      </div>    </n-form-item>  </n-form></template><script lang="ts" setup>......</script>

对于自定义属性编辑组件的书写要求有以下几个：

  • 组件须要接管一个value（必须）和args(可选）属性
  • 组件必须给父组件提供updateValue办法

组件解决

<script lang="ts" setup>import { reactive } from 'vue'import { NForm, NFormItem, NInputNumber, NColorPicker } from 'naive-ui'import { RowType } from './type'const props = defineProps<{  value: RowType  args: any}>()const emits = defineEmits<{  (e: 'change', value: RowType)}>()const formData = reactive<RowType>({  height: props.value.height || 30,  oddRowBGC: props.value.oddRowBGC || '#003B51',  evenRowBGC: props.value.evenRowBGC || '#0A2732'})const changeData = () => {  emits('change', formData)}</script>

value属性接管的是自定义编辑框的值，和一般的属性一样，然而这里能够接管任意的数据，数组、对象或者根底类型数据，咱们在渲染右侧属性编辑框的时候，会把属性框中的数值通过此属性传递给以后组件。

args是咱们提供给组件的额定配置数据，能够依据需要来应用。

updateValue这个办法将会把自定义属性编辑框中的值通过咱们的数据流传递到以后编辑的组件中。

应用自定义编辑框

在ScrollTable目录下的config.ts中减少如下配置：

首先咱们配置type为FormType.CUSTOM，showLabel的作用是是否显示表单中的label，这里次要是为了让咱们的自定义编辑框领有更大的渲染地位，在componentOptions中的componentType属性配置上组件对象，而后defaultValue就是ScrollTableForm组件中updateValue返回的值以及value所接管的值。

做完以上工作，咱们就能够在右侧编辑框查看自定义属性编辑框的成果了。

因为款式和属性有所区别，因而减少自定义款式编辑须要有一些非凡解决，咱们在下一篇在讲，在框架的设计之初咱们就思考到组件、属性编辑、工具栏等采纳动静注册的形式来减少，一方面为了让框架更加简洁，另一方面也升高了组件自定义的难度。

更新日志

  • 减少动态数据接口解决。
  • 减少了脚本解决申请数据。
  • 优化了局部编辑器BUG。
  • 优化了应用体验。

Vue3拖拽式低代码数据可视化平台
OpenDataV低代码平台新增组件流程