关于vue.js:OpenDataV低代码平台增加自定义属性编辑

7次阅读

共计 2181 个字符，预计需要花费 6 分钟才能阅读完成。

上一篇咱们讲到了怎么在 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 所接管的值。

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

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