# custom_demo_js

**Repository Path**: monet-template/custom_demo_js

## Basic Information

- **Project Name**: custom_demo_js
- **Description**: 莫奈自定义组件开发示例（JS）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2024-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义custom_demo_js 组件

## Description
- 初始化的 demo 组件
- Studio命令
  ```js
  1. yarn start  //开发调试
  2. yarn start  //构建，将物料上传到开放平台
  ```

> 组件props：

名称|类型|备注
--|--|--
width|number|组件宽度
height|number|组件高度
config|object|setting.js 中的 config 字段转换的 object `{ theme: 'square', angle: 45, isProd: true }`， 见 setting.config。
data|`<array>`|setting.js 中 data 转换的值 `[{ name: '上海', value: 40 }]`， 见 setting.data
bigScreen|`<object>`|大屏内置能力，详情见 props.bigScreen。
## Usage
> Config配置参数说明,Config中的Key与Value来自setting.config中的code与value
```js
config: [
  {
      name: '主题样式', // 样式名称（设置项需显示的名称）
      code: 'theme',   // 样式编码（组件内需使用的字段名称）
      value: 'square', // 样式默认值
      type: 'Radio',   // 设置项类型（详情见 StyleTypes ）
      enumValue: [     // 单选内容
        { key: '矩形', value: 'square' },
        { key: '圆形', value: 'circle' },
        { key: '平行四边形', value: 'rect' }
      ]
    },
]
```
> Data配置参数说明,默认数据来自setting.data，配置数据来自设置项（静态数据、API数据、数据数据）
```js
[
   {name: "上海",value: 40},
   {name: "深圳",value: 35},
]
```
> bigScreen配置参数说明

名称|类型|备注
--|--|--
setDataPool|function| 设置dataPool，参数详情见props.events
screenInfoData|object| 大屏信息
currentComponent|object| 当前组件信息。

> setting.events配置交互变量的格式
```js
events: {
    //click: setDataPool第一个参数 const {events:{click}} = props
    click: {
      description: '交互事件',
      fields: {
        //x: setDataPool第二个参数 { x: value }
        x: {
          mapper: '',
          description: '字段描述'
        }
      },
      action: {
        active: false, // 开启交互功能
        useDefault: false, // 默认值
        default: {
          x: '',
        }
      }
    }
}
```
> StyleTypes可配置项

表单类型|描述|示例
--|--|--
Input | 文本框 | { name: '单位', code: 'unit', type:'Input', value:''}
InputNumber | 数值文本框 | {name: '字号',code: 'fontSize', value: 14, min: 12, type: 'InputNumber', unit'px(像素)'}
Select | 下拉框 | { name: '标注类型', code: 'markPointType', value: 'max', type: 'Select',  enumValue: [{ key: '最大值', value: 'max' },{ key: '最小值', value: 'min' }]}
ColorSelector | 颜色选择 |  { name: '颜色', code: 'color', value: 'rgba(110, 106, 122, 0.6)', type: 'ColorSelector'}
CustomColors | 自定义颜色 | { name: '颜色设置', code: 'color', value: '#294AB1-#183282',  type: 'CustomColors'}
CheckBox | 选择框 |  { name: '显示图例', code: 'show', type: 'CheckBox', value: true}
Radio | 选择框 |  { name: '文本背景', code: 'bgConfig', type: 'Radio', value: 'show', enumValue: [ { key: '显示', value: 'show' },{ key: '隐藏', value: 'hide' }]}
ImgUpdate | 图片上传 | { name: '上传图片', code: 'url', value: ``, type: 'ImgUpdate' }
GetImgCode | 自定义上传  | { name: '自定义上传', code: 'uploadUrl', value: '', type: 'GetImgCode', }
DateRange | 日期设置  | { name: '自定义上传', code: 'uploadUrl', value: '', type: 'GetImgCode', }
MaxMinValue | 数值范围  | { name: '填充高度', prefix: '高度', unit: null, min: 1, value: '500-100000', code: 'minmaxHeight', type: 'MaxMinValue'}
FontGroup | 文本设置  | { name: '文本设置', code: 'font', type: 'FontGroup', value: { fontSize: 18, fontFamily: 'siyuan', color: '#FFF', fontWeight: 'normal' }}