OpenDataV低代碼平台新增組件流程
- 2022 年 9 月 12 日
- 筆記
OpenDataV計劃採用子庫的方式添加子組件,即每一個組件都當做一個子庫,子庫有自己的依賴,而項目本身的依賴只針對框架,因此每一個組件我們都當做一個子庫來開發。下面我帶着大家一步步詳細的開發一個數字展示組件。
創建組件目錄和文件
- 進入組件庫目錄下
所有的可拖拽組件都存放在src/resource/components
目錄下
cd src/resource/components
- 根據組件名稱創建目錄
默認組件目錄是以組件的名稱命名,當然也可以根據自己的要求命名,組件可以放在components
目錄下,也可以放在其子目錄的目錄下。
mkdir DigitalText
- 創建組件所需的固定文件
每個組件必須的文件有vue文件xxx.vue
、配置文件config.ts
、導出文件index.ts
,每個文件有自己的用處,vue文件不用說了是組件渲染的主體,導出文件名稱固定為index.ts
,主要是導出組件的信息給外部引用,配置文件主要是在編輯頁面右側展示的配置項,這個我們後面再詳述。所以這裡我們需要創建三個文件:DigitalText.vue、config.ts、index.ts
以上我們就創建好了組件所需的文件,下面就需要做組件的初始化了
初始化組件文件
因為我們的組件都是以子庫的方式引入,所以需要進行包的初始化,執行以下命令
cd src/resource/components/Text/DigitalText
npm init
這裡使用npm
初始化包會讓我們選擇填寫部分數據。
下面我們先初始化一下組件文件DigitalText.vue
,先初始化最簡單的組件數據
<template>
<div>數字展示</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 : '數字文本',
id,
width: 100,
height: 30,
icon
})
}
}
export default DigitalComponent
這裡要說明的點:componentName
是組件在項目中的註冊名稱,因此必須保證唯一,group
是給組件分組,這裡的分組主要是展示在組件拖拽頁面,其類型的ComponentGroup
是固定好的,可以自己增加,展示位置如下:
name
是組件在拖拽頁面上顯示的名稱,width
和height
是組件拖拽到畫布上顯示的初始大小
配置完組件後數據後,就可以配置導出文件index.ts
了,主要是導出組件名、組件對象和配置項。
import DigitalTextComponent, { componentName } from './config'
export default {
componentName,
component: () => import('./DigitalText.vue'),
config: DigitalTextComponent
}
初始化到這一步,我們的組件已經可以在編輯頁面正常使用了,看一下效果:
在右邊的編輯頁面我們看到有樣式
和屬性
,所有的組件都包含基礎樣式位置大小
,包括組件的上下邊距和寬高,屬性包含公共屬性,其中組件
和組件ID
無法修改,主要是展示來看的,名稱
可以修改,名稱屬性主要是展示在圖層上,修改名稱後圖層上會響應的顯示修改後的名稱。
這是最基礎的組件,只能展示固定數據,不能進行任何配置,下面我們要做組件的配置項。
組件配置項
樣式配置
作為文字顯示組件,最基礎的字體相關屬性配置應該要有,比如字體、字體顏色、字體大小、字體寬度
,配置項依然是在配置文件中添加,繼承自基礎組件類的私有屬性_style
class DigitalTextComponent extends BaseComponent {
constructor(id?: string, name?: string, icon?: string) {......}
_style: PropsType[] = [
{
label: '字體設置',
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'
}
}
]
}
]
}
樣式配置的格式已經定義好了,其中需要注意的是所有children
下的子項中prop
必須是html
元素的css
屬性,具體的css
屬性名稱並不是我們在style
文件中填寫的,而是在js
中對應的名稱,這個可以在網上搜索:css3 中文手冊
,類似如下:
我們再詳述一下各配置項的意義:
- label:配置顯示的分組名
- prop:唯一的屬性區分,此屬性要與同級別中的其他配置不同
- children:此屬性組下面的配置項
- label:每個屬性的名稱
- prop:
css
屬性值 - type:屬性編輯時顯示的組件類型,目前可顯示的組件是固定的,類型都定義在
FormType
中 - componentOptions:屬性對應的配置項,不同類型的組件有不同的配置項,具體可以在
src/types/component.d.ts
中查看定義,所有配置都有defaultValue
配置,作為屬性初始化時的默認值
配置完樣式後,我們在編輯頁面看一下效果:
搞清楚了樣式的配置,下面我們再說說屬性的配置,屬性配置與樣式配置格式一致,有一些小細節需要注意。
屬性配置
屬性配置是繼承私有變量_prop
,配置格式與樣式相同,我們這裡配置一個示例屬性:
class DigitalTextComponent extends BaseComponent {
constructor(id?: string, name?: string, icon?: string) {......}
_prop: PropsType[] = [
{
label: '數據配置',
prop: 'dataconfig',
children: [
{
prop: 'data',
label: '數據',
type: FormType.NUMBER,
componentOptions: {
defaultValue: 100000,
max: 99999999,
min: 0
}
}
]
}
]
}
格式這裡就不解釋了,這裡我們用到了數值類型,因此可以配置最大最小值。
接下來就是要在vue
文件中使用屬性配置了,屬性不像樣式,樣式是html
元素本身就支持的,因此只要我們配置好,就可以生效了,但是屬性是組件專有的,什麼屬性要產生什麼效果全憑我們自己書寫邏輯,因此配置好屬性我們只會在編輯頁面看到屬性展示和配置,但是實際配置後是沒有任何效果的,具體效果我們在vue
中實現。
屬性使用
首先我們要添加一個類型定義文件,因為ts
最基礎的優勢就是類型提示,而我們封裝的組件基類是通用的,因此需要在每個組件中使用自己的屬性類型定義,定義如下:
// DigitalText/type.ts
export interface DigitalType {
dataconfig: {
data: number
}
}
為了準確的進行提示,類型定義必須和屬性配置一直,具體來講就是children
下面的prop
作為屬性值,children
外面的prop
作為屬性鍵,可以對比一下type.ts
中的配置和_prop
的配置。
組件的配置信息是通過外部傳入的,所以所有組件都必須接收外部數據,我們已經定義好了固定的格式
const props = defineProps<{
component: DigitalTextComponent
}>()
組件相關的所有信息都將通過component
傳入進來,為了監聽屬性變化和類型提示,我們封裝了一個hook,減少每個組件中通用的處理,useProp
的使用如下:
const propChange = (prop: string, key: string, value: number) => {
console.log(prop, key, value)
}
const { propValue } = useProp<DigitalType>(props.component, propChange)
useProp
接收三個參數,一個是component
,主要是為了添加類型提示,所以這裡也傳入了一個泛型定義,就是我們在type.ts
中定義的類型,另外兩個參數是屬性變化回調函數和樣式變化回調函數。一般情況下我們只需要處理屬性變化回調,樣式變化是自動生效的,所以基本上不用處理,如果有特殊需求才需要。屬性變化回調函數中有三個參數,prop
對應的是屬性配置中外層的prop
值,key
對應的是屬性配置中children
中的prop
值,而value
就是屬性變化的值。
最終我們的屬性處理結果如下:
<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>
看一下頁面上的效果:
上面我們用了屬性回調去處理值變化響應,實際上還有其他的方式可以處理,我們要明白屬性回調的根本需求是什麼?主要就是為了編輯了對應的屬性後,我們在組件內能監測到變化反饋到顯示上。相同這一點,可用的方法就多了。
- 直接使用
props
傳遞的屬性值在template
中渲染數據
<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)
因為vue
響應式的原因,props
中的數據是可以響應變化的,那麼我們直接在template
中使用即可,不需要做任何監測。
- 使用
computed
或者watch
監聽屬性變化
這裡和上面是一樣的道理,vue
會自動幫我們處理響應式數據,只要用vue
的計算屬性或者watch
也可以監聽到屬性變化。
<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>
- 屬性變化回調的另一種用法
<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>
屬性變化回調接收任何參數,我們可以選擇接收參數,也可以不接收參數,在一些配置項比較多的組件中,我們不想在屬性回調中去一個一個判斷變化的屬性,那麼就可以使用這種方式,在這種方式中我們只是把屬性回調作為一個通知,即通知我們屬性發生變化了,而我們不關心哪一個屬性發生了變化,把所有的屬性都修改一遍即可,雖然聽起來比較麻煩,但是在一些複雜組件中確實很有作用。在這裡我們要明白,只要屬性發生了變化,那麼prop
中的數據也必定發生了變化,所以我們隨時取prop
中的數據它都是最新的。
總結
到這裡,一個組件的整個添加過程就講完了,根據目前的開發進度來看,基本上所有的部分都講到了,如果有人在使用過程中發現了什麼問題或者有哪些地方不夠清楚的,可以在項目的issue中提,也可以通過其他方式反饋。
添加微信公眾號了解更多信息: