前天我們發(fā)布了OpenDataV低代碼開源框架，有很多友友留言想要了解怎么增加組件，為了方便大家快速上手，馬上趁熱發(fā)布一篇。

OpenDataV計(jì)劃采用子庫(kù)的方式添加子組件，即每一個(gè)組件都當(dāng)做一個(gè)子庫(kù)，子庫(kù)有自己的依賴，而項(xiàng)目本身的依賴只針對(duì)框架，因此每一個(gè)組件我們都當(dāng)做一個(gè)子庫(kù)來開發(fā)。下面我?guī)е蠹乙徊讲皆敿?xì)地開發(fā)一個(gè)數(shù)字展示組件。

創(chuàng)建組件目錄和文件

• 進(jìn)入組件庫(kù)目錄下

所有的可拖拽組件都存放在src/resource/components目錄下

cd src/resource/components

• 根據(jù)組件名稱創(chuàng)建目錄

默認(rèn)組件目錄是以組件的名稱命名，當(dāng)然也可以根據(jù)自己的要求命名，組件可以放在components目錄下，也可以放在其子目錄的目錄下。

mkdir DigitalText

• 創(chuàng)建組件所需的固定文件

每個(gè)組件必須的文件有vue文件xxx.vue、配置文件config.ts、導(dǎo)出文件index.ts，每個(gè)文件有自己的用處，vue文件不用說了是組件渲染的主體，導(dǎo)出文件名稱固定為index.ts，主要是導(dǎo)出組件的信息給外部引用，配置文件主要是在編輯頁(yè)面右側(cè)展示的配置項(xiàng)，這個(gè)我們后面再詳述。所以這里我們需要?jiǎng)?chuàng)建三個(gè)文件：DigitalText.vue、config.ts、index.ts

以上我們就創(chuàng)建好了組件所需的文件，下面就需要做組件的初始化了

初始化組件文件

因?yàn)槲覀兊慕M件都是以子庫(kù)的方式引入，所以需要進(jìn)行包的初始化，執(zhí)行以下命令

cd src/resource/components/Text/DigitalTextnpm init

這里使用npm初始化包會(huì)讓我們選擇填寫部分?jǐn)?shù)據(jù)。

下面我們先初始化一下組件文件DigitalText.vue，先初始化最簡(jiǎn)單的組件數(shù)據(jù)

<template> <div>數(shù)字展示</div></template><script lang="ts" setup></script><style lang="less" scoped></style>

然后我們要初始化組件的配置文件config.ts

import { ComponentGroup, FormType } from '@/enum'import type { PropsType } from '@/types/component'import { BaseComponent } from '@/resource/models'export const componentName = 'Digital'class DigitalComponent extends BaseComponent { constructor(id?: string, name?: string, icon?: string) { super({ component: componentName, group: ComponentGroup.TEXT, name: name ? name : '數(shù)字文本', id, width: 100, height: 30, icon }) }}export default DigitalComponent

這里要說明的點(diǎn)：componentName是組件在項(xiàng)目中的注冊(cè)名稱，因此必須保證唯一，group是給組件分組，這里的分組主要是展示在組件拖拽頁(yè)面，其類型的ComponentGroup是固定好的，可以自己增加，展示位置如下：

name是組件在拖拽頁(yè)面上顯示的名稱，width和height是組件拖拽到畫布上顯示的初始大小

配置完組件后數(shù)據(jù)后，就可以配置導(dǎo)出文件index.ts了，主要是導(dǎo)出組件名、組件對(duì)象和配置項(xiàng)。

import DigitalTextComponent, { componentName } from './config'export default { componentName, component: () => import('./DigitalText.vue'), config: DigitalTextComponent}

初始化到這一步，我們的組件已經(jīng)可以在編輯頁(yè)面正常使用了，看一下效果：

在右邊的編輯頁(yè)面我們看到有樣式和屬性，所有的組件都包含基礎(chǔ)樣式位置大小，包括組件的上下邊距和寬高，屬性包含公共屬性，其中組件和組件ID無法修改，主要是展示來看的，名稱可以修改，名稱屬性主要是展示在圖層上，修改名稱后圖層上會(huì)響應(yīng)的顯示修改后的名稱。

這是最基礎(chǔ)的組件，只能展示固定數(shù)據(jù)，不能進(jìn)行任何配置，下面我們要做組件的配置項(xiàng)。

組件配置項(xiàng)

樣式配置

作為文字顯示組件，最基礎(chǔ)的字體相關(guān)屬性配置應(yīng)該要有，比如字體、字體顏色、字體大小、字體寬度，配置項(xiàng)依然是在配置文件中添加，繼承自基礎(chǔ)組件類的私有屬性_style

class DigitalTextComponent extends Basecomponent { constructor(id?: string, name?: string, icon?: string) {......} _style: PropsType[] = [ { label: '字體設(shè)置', prop: 'font', children: [ { prop: 'color', label: '顏色', type: FormType.COLOR, componentOptions: { defaultValue: 'skyblue' } }, { prop: 'fontSize', label: '字體大小', type: FormType.number, componentOptions: { defaultValue: 20 } }, { prop: 'fontWeight', label: '字體寬度', type: FormType.FONT_WEIGHT, componentOptions: { defaultValue: 200 } }, { prop: 'fontFamily', label: '字體', type: FormType.FONT_STYLE, componentOptions: { defaultValue: 'Arial' } } ] } ]}

樣式配置的格式已經(jīng)定義好了，其中需要注意的是所有children下的子項(xiàng)中prop必須是html元素的css屬性，具體的css屬性名稱并不是我們?cè)?span style="color: #1E6BB8">style文件中填寫的，而是在js中對(duì)應(yīng)的名稱，這個(gè)可以在網(wǎng)上搜索：css3 中文手冊(cè)，類似如下：

我們?cè)僭斒鲆幌赂髋渲庙?xiàng)的意義：

• label：配置顯示的分組名
• prop：唯一的屬性區(qū)分，此屬性要與同級(jí)別中的其他配置不同
• children：此屬性組下面的配置項(xiàng) label：每個(gè)屬性的名稱prop：css屬性值type：屬性編輯時(shí)顯示的組件類型，目前可顯示的組件是固定的，類型都定義在FormType中componentOptions：屬性對(duì)應(yīng)的配置項(xiàng)，不同類型的組件有不同的配置項(xiàng)，具體可以在src/types/component.d.ts中查看定義，所有配置都有defaultValue配置，作為屬性初始化時(shí)的默認(rèn)值

配置完樣式后，我們?cè)诰庉嬳?yè)面看一下效果：

搞清楚了樣式的配置，下面我們?cè)僬f說屬性的配置，屬性配置與樣式配置格式一致，有一些小細(xì)節(jié)需要注意。

屬性配置

屬性配置是繼承私有變量_prop，配置格式與樣式相同，我們這里配置一個(gè)示例屬性：

class DigitalTextComponent extends BaseComponent { constructor(id?: string, name?: string, icon?: string) {......} _prop: PropsType[] = [ { label: '數(shù)據(jù)配置', prop: 'dataconfig', children: [ { prop: 'data', label: '數(shù)據(jù)', type: FormType.NUMBER, componentOptions: { defaultValue: 100000, max: 99999999, min: 0 } } ] } ]}

格式這里就不解釋了，這里我們用到了數(shù)值類型，因此可以配置最大最小值。

接下來就是要在vue文件中使用屬性配置了，屬性不像樣式，樣式是html元素本身就支持的，因此只要我們配置好，就可以生效了，但是屬性是組件專有的，什么屬性要產(chǎn)生什么效果全憑我們自己書寫邏輯，因此配置好屬性我們只會(huì)在編輯頁(yè)面看到屬性展示和配置，但是實(shí)際配置后是沒有任何效果的，具體效果我們?cè)?span style="color: #1E6BB8">vue中實(shí)現(xiàn)。

屬性使用

首先我們要添加一個(gè)類型定義文件，因?yàn)?/span>ts最基礎(chǔ)的優(yōu)勢(shì)就是類型提示，而我們封裝的組件基類是通用的，因此需要在每個(gè)組件中使用自己的屬性類型定義，定義如下：

// DigitalText/type.tsexport interface DigitalType { dataconfig: { data: number }}

為了準(zhǔn)確地進(jìn)行提示，類型定義必須和屬性配置一致，具體來講就是children下面的prop作為屬性值，children外面的prop作為屬性鍵，可以對(duì)比一下type.ts中的配置和_prop的配置。

組件的配置信息是通過外部傳入的，所以所有組件都必須接收外部數(shù)據(jù)，我們已經(jīng)定義好了固定的格式

const props = defineProps<{ component: DigitalTextComponent}>()

組件相關(guān)的所有信息都將通過component傳入進(jìn)來，為了監(jiān)聽屬性變化和類型提示，我們封裝了一個(gè)hook，減少每個(gè)組件中通用的處理，useProp的使用如下：

const propChange = (prop: string, key: string, value: number) => { console.log(prop, key, value)}const { propValue } = useProp<DigitalType>(props.component, propChange)

useProp接收三個(gè)參數(shù)，一個(gè)是component，主要是為了添加類型提示，所以這里也傳入了一個(gè)泛型定義，就是我們?cè)?span style="color: #1E6BB8">type.ts中定義的類型，另外兩個(gè)參數(shù)是屬性變化回調(diào)函數(shù)和樣式變化回調(diào)函數(shù)。一般情況下我們只需要處理屬性變化回調(diào)，樣式變化是自動(dòng)生效的，所以基本上不用處理，如果有特殊需求才需要。屬性變化回調(diào)函數(shù)中有三個(gè)參數(shù)，prop對(duì)應(yīng)的是屬性配置中外層的prop值，key對(duì)應(yīng)的是屬性配置中children中的prop值，而value就是屬性變化的值。

最終我們的屬性處理結(jié)果如下：

<template> <div>{{ data }}</div></template><script lang="ts" setup>import { ref } from 'vue'import DigitalTextComponent from './config'import { useProp } from '@/resource/hooks'import { DigitalType } from './type'const props = defineProps<{ component: DigitalTextComponent}>()const propChange = (prop: string, key: string, value: number) => { if (prop === 'dataconfig' && key === 'data') { data.value = value }}const { propValue } = useProp<DigitalType>(props.component, propChange)const data = ref<number>(propValue.dataconfig.data)</script><style lang="less" scoped></style>

看一下頁(yè)面上的效果：

上面我們用了屬性回調(diào)去處理值變化響應(yīng)，實(shí)際上還有其他的方式可以處理，我們要明白屬性回調(diào)的根本需求是什么？主要就是為了編輯了對(duì)應(yīng)的屬性后，我們?cè)诮M件內(nèi)能監(jiān)測(cè)到變化反饋到顯示上。相同這一點(diǎn)，可用的方法就多了。

• 直接使用props傳遞的屬性值在template中渲染數(shù)據(jù)

<template> <div>{{ propValue.dataconfig.data }}</div></template><script lang="ts" setup>import DigitalTextComponent from './config'import { useProp } from '@/resource/hooks'import { DigitalType } from './type'const props = defineProps<{ component: DigitalTextComponent}>()const { propValue } = useProp<DigitalType>(props.component)

因?yàn)?/span>vue響應(yīng)式的原因，props中的數(shù)據(jù)是可以響應(yīng)變化的，那么我們直接在template中使用即可，不需要做任何監(jiān)測(cè)。

• 使用computed或者watch監(jiān)聽屬性變化

這里和上面是一樣的道理，vue會(huì)自動(dòng)幫我們處理響應(yīng)式數(shù)據(jù)，只要用vue的計(jì)算屬性或者watch也可以監(jiān)聽到屬性變化。

<template> <div>{{ data }}</div></template><script lang="ts" setup>import { computed } from 'vue'import DigitalTextComponent from './config'import { useProp } from '@/resource/hooks'import { DigitalType } from './type'const props = defineProps<{ component: DigitalTextComponent}>()const { propValue } = useProp<DigitalType>(props.component)const data = computed<number>(() => { return propValue.dataconfig.data})</script><style lang="less" scoped></style>

• 屬性變化回調(diào)的另一種用法

<template> <div>{{ data }}</div></template><script lang="ts" setup>import { ref } from 'vue'import DigitalTextComponent from './config'import { useProp } from '@/resource/hooks'import { DigitalType } from './type'const props = defineProps<{ component: DigitalTextComponent}>()const propChange = () => { data.value = propValue.dataconfig.data}const { propValue } = useProp<DigitalType>(props.component, propChange)const data = ref<number>(propValue.dataconfig.data)</script><style lang="less" scoped></style>

屬性變化回調(diào)接收任何參數(shù)，我們可以選擇接收參數(shù)，也可以不接收參數(shù)，在一些配置項(xiàng)比較多的組件中，我們不想在屬性回調(diào)中去一個(gè)一個(gè)判斷變化的屬性，那么就可以使用這種方式，在這種方式中我們只是把屬性回調(diào)作為一個(gè)通知，即通知我們屬性發(fā)生變化了，而我們不關(guān)心哪一個(gè)屬性發(fā)生了變化，把所有的屬性都修改一遍即可，雖然聽起來比較麻煩，但是在一些復(fù)雜組件中確實(shí)很有作用。在這里我們要明白，只要屬性發(fā)生了變化，那么prop中的數(shù)據(jù)也必定發(fā)生了變化，所以我們隨時(shí)取prop中的數(shù)據(jù)它都是最新的。

總結(jié)

到這里，一個(gè)組件的整個(gè)添加過程就講完了，根據(jù)目前的開發(fā)進(jìn)度來看，基本上所有的部分都講到了，如果有人在使用過程中發(fā)現(xiàn)了什么問題或者有哪些地方不夠清楚的，可以在項(xiàng)目的issue中提，也可以通過其他方式反饋。