阿里低代碼框架lowcode-engine自定義設(shè)置器詳解

更新時(shí)間：2023年02月12日 10:09:02 作者：杰出D

這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

之前介紹了lowcode-engine引擎的自定義物料。在具體實(shí)際開(kāi)發(fā)過(guò)程中，雖然官方提供了許多設(shè)置器，但可能滿足不了我們的需要，需要我們自定義設(shè)置器。

官方腳手架設(shè)置器開(kāi)發(fā)

設(shè)置器主要用于低代碼組件屬性值的設(shè)置，顧名思義叫"設(shè)置器"，又稱為 Setter。由于組件的屬性有各種類(lèi)型，需要有與之對(duì)應(yīng)的設(shè)置器支持，每一個(gè)設(shè)置器對(duì)應(yīng)一個(gè)值的類(lèi)型。

項(xiàng)目初始化

lowcode官方給我們提供了腳手架，我們通過(guò)腳手架可以快速創(chuàng)建

npm init @alilc/element lowcode-app-material  // lowcode-app-material項(xiàng)目名稱

我們選擇物料【組件設(shè)置器（setter）】類(lèi)型。確認(rèn)

安裝依賴，啟動(dòng)調(diào)試環(huán)境

npm &amp; yarn install

安裝好依賴之后，就可以啟動(dòng)開(kāi)發(fā)環(huán)境

yarn dev

開(kāi)發(fā)自己的設(shè)置器

import * as React from "react";
import { Input } from "@alifd/next";
import "./index.scss";
interface AltStringSetterProps {
  // 當(dāng)前值
  value: string;
  // 默認(rèn)值
  initialValue: string;
  // setter 唯一輸出
  onChange: (val: string) => void;
  // AltStringSetter 特殊配置
  placeholder: string;
}
export default class AltStringSetter extends React.PureComponent<AltStringSetterProps> {
  componentDidMount() {
    const { onChange, value, defaultValue } = this.props;
    if (value == undefined && defaultValue) {
      onChange(defaultValue);
    }
  }
  // 聲明 Setter 的 title
  static displayName = 'AltStringSetter';
  render() {
    const { onChange, value, placeholder } = this.props;
    return (
      <Input
        value={value}
        placeholder={placeholder || ""}
        onChange={(val: any) => onChange(val)}
      ></Input>
    );
  }
}

使用設(shè)置器

開(kāi)發(fā)完畢之后，需發(fā)包或者通過(guò)link的方式使用AltStringSetter 到設(shè)計(jì)器中：

import AltStringSetter from 'AltStringSetter';
import { setters } from '@alilc/lowcode-engine';
const { registerSetter } = registerSetter;
registerSetter('AltStringSetter', AltStringSetter);

在物料庫(kù)內(nèi)設(shè)置器開(kāi)發(fā)

上面我們介紹了單獨(dú)去開(kāi)發(fā)設(shè)置器，需發(fā)包后注冊(cè)到引擎中使用。還有一種情況一些設(shè)置器是跟隨組件，為組件使用，不需要共享，我們可以直接可以在物料庫(kù)中開(kāi)發(fā)設(shè)置器。

設(shè)置器開(kāi)發(fā)

之前我們介紹過(guò)通過(guò)官方物料庫(kù)腳手架去開(kāi)發(fā)組件。組件在編譯完成之后會(huì)在根目錄生成lowcode文件夾，里面的內(nèi)容為組件的meta信息。

我們可以在當(dāng)前目錄創(chuàng)建_setter文件夾，來(lái)開(kāi)發(fā)我們的setter，setter開(kāi)發(fā)方式按官方文檔去開(kāi)發(fā)。在這里，我們開(kāi)發(fā)了一個(gè)DefaultValueSetter(默認(rèn)值setter)。

import React, { createElement } from 'react';
import { Switch, Select, Input, Button, } from '@alifd/next';
import { event } from '@alilc/lowcode-engine';
import './style.less';
const Option = Select.Option;
export interface DefaultValueSetterProps {
  fieldType: 'input' | 'textarea' | 'number',
  onChange: (value) => void;
  value: IValue
}
export interface DefaultValueSetterState {}
export class DefaultValueSetter extends React.Component<DefaultValueSetterProps, DefaultValueSetterState> {
  static displayName = 'DefaultValueSetter';
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount(): void {
    event.on(EDefaultValueSetterEventName.ValueChange, this.formulaValueChange)
  }
  // ...省略部分代碼
  handleValueTypeChange = (valueType) => {
    const { onChange, value } = this.props;
    onChange({
      ...value,
      valueType
    });
  }
  handleValueChange = (currValue) => {
    const { onChange, value } = this.props;
    const newVale = {
      ...value,
      value: currValue,
    };
    onChange(newVale);
  }
  render() {
    const { fieldType, value } = this.props;
    console.log('value, defaultValue', value, this.props)
    return (<div className="lowcode-setter-ui-material-setter">
      <Select style={{ width: '100%', marginBottom: 10 }} value={value?.valueType} onChange={this.handleValueTypeChange}>
        <Option value='1'>自定義</Option>
        <Option value='2'>公式編輯</Option>
      </Select>
      {this.getItem()}
    </div>)
  }
}

使用設(shè)置器

設(shè)置器開(kāi)發(fā)完成后，我們可以在組件的meta.ts中使用剛剛開(kāi)發(fā)的設(shè)置器。

  {
        "title": {
          "label": {
            "type": "i18n",
            "en-US": "format",
            "zh-CN": "默認(rèn)值"
          }
        },
        "name": "defaultValue",
        "setter": {
          "componentName": DefaultValueSetter, //默認(rèn)值設(shè)置器
          "props": {
            "fieldType": 'input'
          },
          "isRequired": false,
          "initialValue": {
            valueType: '1',
            value: "",
          }
        }
      },

工程目錄結(jié)構(gòu)為