上一篇我们讲到了怎么在OpenDataV中添加自己的组件 , 为了让大家更快的上手我们的平台,这一次针对自定义属性编辑,我们再来加一篇说明 。我们先来看一下OpenDataV中的属性编辑功能 。
文章插图
当我们拖动一个组件到画布中以后,点击组件,在页面的右侧就出现了对应的属性编辑 。在上一篇新增组件的文章中我们有一个配置文件
config.ts
,配置了组件的样式和属性修改,其中对于每一项配置我们设置了类型FormType
,就像如下:【OpenDataV低代码平台增加自定义属性编辑】
文章插图
目前我们的
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="https://www.huyubaike.com/biancheng/formData.height" @keypress.enter.prevent="changeData" /></n-form-item><n-form-item label="背景色"><div class="backcolor"><n-color-picker v-model:value="https://www.huyubaike.com/biancheng/formData.oddRowBGC" @complete="changeData" /><span class="title">奇数行</span></div><div class="backcolor"><n-color-picker v-model:value="https://www.huyubaike.com/biancheng/formData.evenRowBGC" @complete="changeData" /><span class="title">偶数行</span></div></n-form-item></n-form></template><script lang="ts" setup>......</script>
对于自定义属性编辑组件的书写要求有以下几个:- 组件需要接收一个
value
(必须)和args
(可?。┦粜?/li> - 组件必须给父组件提供
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: RowTypeargs: any}>()const emits = defineEmits<{(e: 'change', value: RowType)}>()const formData = https://www.huyubaike.com/biancheng/reactive({height: props.value.height || 30,oddRowBGC: props.value.oddRowBGC ||'#003B51',evenRowBGC: props.value.evenRowBGC || '#0A2732'})const changeData = https://www.huyubaike.com/biancheng/() => {emits('change', formData)}</script>
value
属性接收的是自定义编辑框的值,和普通的属性一样,但是这里可以接收任意的数据,数组、对象或者基础类型数据,我们在渲染右侧属性编辑框的时候,会把属性框中的数值通过此属性传递给当前组件 。args
是我们提供给组件的额外配置数据,可以根据需求来使用 。updateValue
这个方法将会把自定义属性编辑框中的值通过我们的数据流传递到当前编辑的组件中 。使用自定义编辑框在
ScrollTable
目录下的config.ts
中增加如下配置:文章插图
首先我们配置
type
为FormType.CUSTOM
, showLabel
的作用是是否显示表单中的label,这里主要是为了让我们的自定义编辑框拥有更大的渲染位置,在componentOptions
中的componentType
属性配置上组件对象 , 然后defaultValue
就是ScrollTableForm
组件中updateValue
返回的值以及value
所接收的值 。做完以上工作,我们就可以在右侧编辑框查看自定义属性编辑框的效果了 。
文章插图
因为样式和属性有所区别,因此增加自定义样式编辑需要有一些特殊处理 , 我们在下一篇在讲,在框架的设计之初我们就考虑到组件、属性编辑、工具栏等采用动态注册的方式来增加,一方面为了让框架更加简洁 , 另一方面也降低了组件自定义的难度 。
推荐阅读
- 如何通过执行SQL为低代码项目提速?
- 【前端必会】使用indexedDB,降低环境搭建成本
- 密码学奇妙之旅、02 混合加密系统、AES、RSA标准、Golang代码
- 跟我学Python图像处理丨傅里叶变换之高通滤波和低通滤波
- 低风险地区跨省需要隔离吗_低风险地区去外地用隔离吗
- 上 ?打造企业自己代码规范IDEA插件
- 密码学奇妙之旅、03 HMAC单向散列消息认证码、Golang代码
- 【Python+C#】手把手搭建基于Hugging Face模型的离线翻译系统,并通过C#代码进行访问
- 如何通过 Java 代码隐藏 Word 文档中的指定段落
- 空调遥控器锁代码怎么解(空调遥控器显示锁代码)