IoT 组件库
# 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
在线预览:戳我 😘
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 字体图标
-
新增组件:执行命令
npm run add:com
,选择组件类型,填写组件名,生成空组件模板,执行yarn start 可在网站实时查看组件样式 -
写完组件后,配置grapesjsconfig.tsx 。拖拽工程根据这里的定义生成Type 和Block
-
判断该组件是否为拖拽元素(在Block.ts中导出),判断拖拽平台是否注册为基础组件(在types.ts 中导出)
-
发布组件
npm publish // 注意切换npm源
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: '可选副标题',
}
export interface TypeConfig {
tagName: string; //标签名称
render: (attributes: any) => JSX.Element; //渲染逻辑
traits: (opt: any) => Array<ITraits>; //修改属性
}
render 的参数是你配置的traits 中的{name:value};取值注意。