iot-com

IoT 组件库

Development

# install dependencies
$ npm install

# develop library by docs demo
$ npm start

# build library source code
$ npm run build

# build library source code in watch mode
$ npm run build:watch

# build docs
$ npm run docs:build

# check your project for potential problems
$ npm run doctor

IOT UI 组件库

在线预览：戳我 😘

Q&A

1.添加了新的组件，路径也配置好了，为什么打开页面的时候展示404

      a:重启项目试试

运行项目

• 提交代码

  yarn commit

  使用 yarn commit 替代 git commit生成规范的 Commit Message，当然为了效率你可以选择手写，但是要符合规范

本地预览：

npm install
npm run start

按顺序执行完命令后，即可在 localhost:3000 端口看到以下内容：

开发项目

一、项目结构

• Components 自定义组件

  • Blocks.ts 导出组件的block 定义.如果不希望拖拽可以不导出

  • Types.ts 导出组件的Type 定义.必须导出。如果不再使用，可在这里移除

  • index.ts 正常导出组件。做为普通组件使用

  • Bool 盛放bool 类型组件

    • switch

      • Demo 开发时用于调试的demo目录

      • style 样式

      • build.tsx 打包定义文件

      • GrapesjsConfig.tsx

        这里配置组件平台的组件及block

        Type: 相当于标签

        block: 拖拽元素，用于形成左侧组件列表

        类型为:GrapesjsConfig,根据想要的按结构书写即可

      • index.ts

      • Interface.ts 定义类型

      • IOTSwitch 组件定义文件

• scripts 脚本目录

• Static 静态资源

  • font 字体图标

二、开发

1. 新增组件：执行命令 npm run add:com,选择组件类型，填写组件名，生成空组件模板，执行yarn start 可在网站实时查看组件样式

2. 写完组件后，配置grapesjsconfig.tsx 。拖拽工程根据这里的定义生成Type 和Block

3. 判断该组件是否为拖拽元素(在Block.ts中导出),判断拖拽平台是否注册为基础组件(在types.ts 中导出)

4. 发布组件

    npm publish // 注意切换npm源

三、 关键类

1、ITraits

export interface ITraits {
  type: string;//属性类型
  name: string;//在attributes 中的名称
  value: any;//默认值
  label?: string;//左侧展示名称
  placeHold?:string;//当是文本类型时文本框的placehold
  optionValue?:string;//可选类型时使用
  optionName?:string;
}

type 支持的类型有:Text、Number、Checkbox、Select、Color、Button以及自定义的类型option-text

• Text、Number、Checkbox、Select、Color、Button配置方式

  • 详细见:grapes

• option-text 配置方式:

{
  type: 'option-text',
  name: 'showSubtitle',
  value: true,
  optionName: 'subTitle',
  optionValue: '副标题',
  placeHold: '可选副标题',
 }

2、TypeConfig

export interface TypeConfig {
  tagName: string; //标签名称
  render: (attributes: any) => JSX.Element; //渲染逻辑
  traits: (opt: any) => Array<ITraits>; //修改属性
}

render 的参数是你配置的traits 中的{name:value};取值注意。