本地开发测试

步骤一：开发属性文件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()中使用的样式container和square，并保存。

   .container {
       text-align: center;
   
   }
   
   .square{
       width: 100px;
       height: 100px;
       background-color: #ff0000;
   }

步骤三：预览组件效果

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

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