文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

阿里低代码框架lowcode-engine自定义设置器详解

2023-02-12 12:00

关注

前言

之前介绍了lowcode-engine引擎的自定义物料。在具体实际开发过程中,虽然官方提供了许多设置器,但可能满足不了我们的需要,需要我们自定义设置器。

官方脚手架设置器开发

设置器主要用于低代码组件属性值的设置,顾名思义叫"设置器",又称为 Setter。由于组件的属性有各种类型,需要有与之对应的设置器支持,每一个设置器对应一个值的类型。

项目初始化

npm init @alilc/element lowcode-app-material  // lowcode-app-material项目名称

npm & yarn install

安装好依赖之后,就可以启动开发环境

yarn dev

开发自己的设置器

import * as React from "react";
import { Input } from "@alifd/next";
import "./index.scss";
interface AltStringSetterProps {
  // 当前值
  value: string;
  // 默认值
  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>
    );
  }
}

使用设置器

开发完毕之后,需发包或者通过link的方式使用AltStringSetter 到设计器中:

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

在物料库内设置器开发

上面我们介绍了单独去开发设置器,需发包后注册到引擎中使用。还有一种情况一些设置器是跟随组件,为组件使用,不需要共享,我们可以直接可以在物料库中开发设置器。

设置器开发

之前我们介绍过通过官方物料库脚手架去开发组件。组件在编译完成之后会在根目录生成lowcode文件夹,里面的内容为组件的meta信息。

我们可以在当前目录创建_setter文件夹,来开发我们的setter,setter开发方式按官方文档去开发。在这里,我们开发了一个DefaultValueSetter(默认值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>)
  }
}

使用设置器

设置器开发完成后,我们可以在组件的meta.ts中使用刚刚开发的设置器。

  {
        "title": {
          "label": {
            "type": "i18n",
            "en-US": "format",
            "zh-CN": "默认值"
          }
        },
        "name": "defaultValue",
        "setter": {
          "componentName": DefaultValueSetter, //默认值设置器
          "props": {
            "fieldType": 'input'
          },
          "isRequired": false,
          "initialValue": {
            valueType: '1',
            value: "",
          }
        }
      },

工程目录结构为

结束语

以上就是设置器的开发和使用。后续我们介绍一下基于lowcode引擎做出的一个完整的案例,更多关于lowcode-engine自定义设置器的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯