OpenDataV低代碼平臺新增組件流程詳解

更新時間：2022年09月13日 10:14:25 作者：星星在線

這篇文章主要為大家介紹了OpenDataV低代碼平臺新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

OpenDataV計劃采用子庫的方式添加子組件，即每一個組件都當做一個子庫，子庫有自己的依賴，而項目本身的依賴只針對框架，因此每一個組件我們都當做一個子庫來開發(fā)。下面我?guī)е蠹乙徊讲皆敿毜拈_發(fā)一個數字展示組件。

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

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

cd src/resource/components

默認組件目錄是以組件的名稱命名，當然也可以根據自己的要求命名，組件可以放在components目錄下，也可以放在其子目錄的目錄下。

mkdir DigitalText

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

每個組件必須的文件有vue文件xxx.vue、配置文件config.ts、導出文件index.ts，每個文件有自己的用處，vue文件不用說了是組件渲染的主體，導出文件名稱固定為index.ts，主要是導出組件的信息給外部引用，配置文件主要是在編輯頁面右側展示的配置項，這個我們后面再詳述。

所以這里我們需要創(chuàng)建三個文件：DigitalText.vue、config.ts、index.ts

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

初始化組件文件

因為我們的組件都是以子庫的方式引入，所以需要進行包的初始化，執(zhí)行以下命令

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：唯一的屬性區(qū)分，此屬性要與同級別中的其他配置不同

children：此屬性組下面的配置項

label：每個屬性的名稱
prop：css屬性值
type：屬性編輯時顯示的組件類型，目前可顯示的組件是固定的，類型都定義在FormType中
componentOptions：屬性對應的配置項，不同類型的組件有不同的配置項，具體可以在src/types/component.d.ts中查看定義，所有配置都有defaultValue配置，作為屬性初始化時的默認值

配置完樣式后，我們在編輯頁面看一下效果：

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

屬性配置

屬性配置是繼承私有變量_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中實現(xiàn)。

屬性使用

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

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

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

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

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

組件相關的所有信息都將通過component傳入進來，為了監(jiān)聽屬性變化和類型提示，我們封裝了一個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>

看一下頁面上的效果：

上面我們用了屬性回調去處理值變化響應，實際上還有其他的方式可以處理，我們要明白屬性回調的根本需求是什么？主要就是為了編輯了對應的屬性后，我們在組件內能監(jiān)測到變化反饋到顯示上。相同這一點，可用的方法就多了。

直接使用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中使用即可，不需要做任何監(jiān)測。

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

這里和上面是一樣的道理，vue會自動幫我們處理響應式數據，只要用vue的計算屬性或者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>

屬性變化回調的另一種用法

<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>

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

總結

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

以上就是OpenDataV低代碼平臺新增組件流程詳解的詳細內容，更多關于OpenDataV低代碼新增組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

關于Less在Vue中的使用方法介紹
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關于Less在Vue中的使用方法,需要的朋友可以參考下
2023-10-10
vue-cli腳手架創(chuàng)建項目遇到的坑及解決
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項目遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
淺談關于iview表單驗證的問題
這篇文章主要介紹了淺談關于iview表單驗證的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vue+elementui 實現(xiàn)上傳文件/導入文件的功能示例詳解
文章介紹了如何使用Vue和Element UI實現(xiàn)上傳文件和導入文件的功能,主要內容包括：上傳組件的使用、data中的數據存儲、methods中的方法（選擇文件、點擊確定上傳文件、刪除文件）,文章還提供了相關鏈接供進一步學習,感興趣的朋友一起看看吧
2025-03-03
Element實現(xiàn)表格分頁數據選擇+全選所有完善批量操作
這篇文章主要介紹了Element實現(xiàn)表格分頁數據選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-06-06
vue中七牛插件使用的實例代碼
本篇文章主要介紹了vue中七牛插件使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
解決Vue 移動端點擊出現(xiàn)300毫秒延遲的問題
這篇文章主要介紹了解決Vue 移動端點擊出現(xiàn)300毫秒延遲的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue-cli-service serve報錯error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報錯error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
Vue.directive使用注意(小結)
這篇文章主要介紹了Vue.directive使用注意(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08