下文介绍组件开发过程和测试效果。

前提条件

已完成环境安装和项目文件初始化。详细内容请参见准备环境

步骤一:开发属性文件specs

组件能力描述内容,主要集中在项目文件的src/specs/specs.js文件中,用于开发组件的属性、服务和事件功能。详细说明请参见组件能力描述

  1. 在项目文件中,找到并打开specs.js文件,可查看初始化组件配置及说明。
  2. 根据业务需求,修改内容并保存。
    下文以配置布尔(bool)和颜色(color)类型属性为例。有关属性类型说明,请参见属性类型
    说明 下文提供代码仅为开发示例,实际开发中,请替换为您需要设置的实际内容。
    export default {
      meta: {
        cssPrefixer: 'material-'
      },
      "properties": [{
        "identifier": "$width",
        "defaultValue": 200,
        "options": {
          "min": 160
        }
      }, {
        "identifier": "$height",
        "defaultValue": 300,
        "options": {
          "min": 200
        }
      }, {
        "identifier": "boolstatus",
        "text": "是否显示",
        "type": "bool",
        "defaultValue": true
      },
      {
        identifier: 'searchBackgrund',
        text: "组件颜色",
        type: 'color',
        defaultValue: { r: 222, g: 222, b: 222, a: 1 },
        disableDataSources: 'all'
      }, ],
      "services": [{
        "identifier": "$getValue",
        "text": "取值",
        "effect": false
      }],
      "events": [{
        "identifier": "$change",
        "text": "值改变",
        "fields": [{
          "identifier": "value",
          "description": "当前值"
        }]
      }]
    };

步骤二:开发入口文件index

组件本身的代码开发,主要集中在src/index.tsx文件中。

该文件主要通过render(): JSX.Element{}方法实现组件展示配置,即使用this.props获取specs.js中配置的属性值,然后通过属性值控制组件展示的状态和形态。

有关属性定义的使用说明,请参见定义属性

  1. 找到并打开index.tsx文件,可查看初始化组件配置及说明。
  2. 根据业务需求,修改内容并保存。
    下文配置了一个矩形作为组件形态,通过specs中的属性值,控制组件是否显示及显示的背景颜色。
    import * as React from "react";
    import BaseComponent from "@maliang/base-class-component";
    import { Input, Button } from '@alifd/next';
    
    import { colorObjectToCss, ColorObject } from '@maliang/visualapp-util-props';
    
    import styles from './index.scss';
    // 此处必须import,否则无法触发specs.js到specs.json的实时编译
    import "./specs/specs";
    
    export interface Props {
        $width: number;
        $height: number;
        boolstatus: boolean;
    }
    
    export interface State {
      value: string;
      defaultValue: string;
    }
    
    class BoolTest extends BaseComponent<Props, State, {}> {
    
        /* eslint-disable @typescript-eslint/no-explicit-any*/
        constructor(props: Props, context: any) {
            /* eslint-enable @typescript-eslint/no-explicit-any*/
            super(props, context);
    
            this.state = {
            };
        }
    
        // 如果不需要国际化和主题设置,则删除ConfigContext.Consumer相关代码,直接写jsx
        render(): JSX.Element {
            // 通过this.props获取specs中的配置值
            const { $width, width, $height, height, searchBackgrund, boolstatus } = this.props;
            const style = { width, height };
    
            // 配置属性作用的组件状态和形态
            return (
                <div className={styles['container']} style={style}>
                    { boolstatus && <div className={styles['square']} style={{background:colorObjectToCss(searchBackgrund)}}></div>}
                </div>
            );
        }
    }
    
    export default BoolTest;
  3. 打开src/index.scss样式文件,修改在render()中使用的样式containersquare,并保存。
    .container {
        text-align: center;
    
    }
    
    .square{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
    }

步骤三:预览组件效果

回到已在浏览器中打开的组件开发页面,该页面可自动更新配置的组件样式。

您可根据配置的属性,设置组件样式,如图所示。

组件样式调试

后续步骤

打包本地项目文件