配置控件类型

平台为组件配置界面提供了多种内置控件，这些控件的类型和展示形式由不同的json对象决定。

1. text 文本

配置项说明

示例配置

{
  "type": "text",
    "name": "text",
    "displayName": "文本",
    "value": "静态文本"
}

Example

2. input 输入框

配置项说明

config配置项说明

示例配置

{
  "type": "input",
    "name": "input",
    "displayName": "文本",
    "value": "文本",
    "config": {
    "disabled": false,
      "placeholder": "请输入一段文本",
      "prefix": "前缀",
      "suffix": "后缀"
  }
}

Example

3. number 数值输入框

配置项说明

config配置项说明

示例配置

{
  type: "number",
  name: "number",
  displayName: "数值",
  value: 123,
  config: {
    min: 0,
    max: 100,
    step: 1,
    disabled: false,
    prefix: "",
    suffix: "",
    placeholder: "",
    showStep: true，
    // 此处触发的hook为
    // function validataFun(oldVal,newVal){
    //	return newVal/2
    //}
    validataFun: "return newVal/2",
    // 结果保留整数
    precision: 0
  }
}

{
  "type": "number",
    "name": "number",
    "displayName": "数值",
    "value": 123,
    "config": {
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
    "prefix": "",
    "suffix": "",
    "placeholder": "",
    "showStep": true,
    "validataFun": "return newVal/2",
    "precision": 0,
  }
}

Example

4. selectCard 下拉框

配置项说明

config配置项说明

示例配置

{
  type: "selectCard",
    name: "select",
    displayName: "选择",
    config: {
    //选项列表
    options: [   
      { //绝对地址
        name: "选项一",
        value: "option1",
        cover: 'https://easyv.assets.dtstack.com/template/S4NcbB0Ie_1600333577795_qposcvVE59.jpg'
      },
      { //相对地址
        name: "选项二",
        value: "option2",
        cover: 'template/S4NcbB0Ie_1600333577795_qposcvVE59.jpg'
      }
    ],
      //占位提示符
      placeholder: "请选择",
      //允许输入
      allowInput: true
  }
}

{
  "type": "selectCard",
    "name": "select",
    "displayName": "选择",
    "config": {
    "options": [
      {
        "name": "选项一",
        "value": "option1",
        "cover": "https://easyv.assets.dtstack.com/template/S4NcbB0Ie_1600333577795_qposcvVE59.jpg"
      },
      {
        "name": "选项二",
        "value": "option2",
        "cover": "template/S4NcbB0Ie_1600333577795_qposcvVE59.jpg"
      }
    ],
      "placeholder": "请选择",
      "allowInput": true
  }
}

5. select 下拉框

配置项说明

config配置项说明

示例配置

{
  "type": "select",
    "name": "select",
    "displayName": "选择",
    "value": "rect",
    "config": {
    "options": [
      {
        "name": "选项一",
        "value": "option1"
      },
      {
        "name": "选项二",
        "value": "option2"
      }
    ],
      "placeholder": "请选择",
      "allowInput": true
  }
}

Example

6. range 区间滑动条

配置项说明

config配置项说明

示例配置

{
    "type": "range",
    "name": "range",
    "displayName": "区间",
    "value": 10,
    "config": {
        "min": 0,
        "max": 100,
        "step": 1,
        "suffix": "",
        "prefix": ""
    }
}

Example

7. radio 单选框

配置项说明

config配置项说明

示例配置

{
    "type": "radio",
    "name": "radio",
    "displayName": "单选",
    "value": "option1",
    "config": {
        "options": [
            {
                "name": "选项一",
                "value": "option1"
            },
            {
                "name": "选项二",
                "value": "option2"
            }
        ],
        "mode": "normal"
    }
}

Example

8. boolean 开关

配置项说明

config配置项说明

示例配置

{
    "name": "boolean",
    "displayName": "布尔",
    "value": false,
    "type": "boolean"
}

Example

9. checkbox 多选框

配置项说明

config配置项说明

示例配置

{
    "name": "position",
    "displayName": "位置",
    "value": "bottom",
    "type": "checkbox",
    "config": {
        "options": [
            {
                "name": "右",
                "value": "right"
            },
            {
                "name": "上",
                "value": "top"
            },
            {
                "name": "下",
                "value": "bottom"
            }
        ]
    }
}

Example

10. color 颜色选择器

配置项说明

config配置项说明

示例

{
    "name": "color",
    "displayName": "颜色",
    "value": "#fff",
    "type": "color"
}

Example

11. multicolor(多类型颜色) （需要easyv 平台 v3.15及以上）

配置项说明

config配置项说明

value配置项说明

示例

{
	name: "color",
  displayName: "颜色",
  type: "multicolor",
  value: {
    type: "linear", 
    pure: "#fff", 
    linear: {
      stops: [{"offset": 0, "color": '#fff'}, {"offset": 50, "color": '#ff0'}, {"offset": 100, "color": '#f0f'}],
      angle: 30,
      opacity: 1
    }
  }
}

12. rangeColor(颜色区间) （需要easyv 平台 v4.5.0及以上）

配置项说明

示例

{
	"name": "group",
  "displayName": "颜色隐射",
  "type": "group",
  "value": [
    {
    	"name": "rangeColor",
      "displayName": "最小值 -> 最大值",
      "type": "rangeColor",
      "value": [
        {
          "offset": 0,
          "color": "#fff"
        },
        {
          "offset": 100,
          "color": "#000"
        }
      ] 
    }
  ] 
}

Example

13. array 系列

该控件允许用户添加一组预设的配置，并给每一组设置不同的值

配置项说明

config配置项说明

示例

{
    "name": "series",
    "displayName": "数据系列",
    "type": "array",
    "value": [
        {
            "name": "child1",
            "displayName": "系列",
            "value": [
                {
                    "type": "input",
                    "name": "input",
                    "displayName": "文本",
                    "value": "文本"
                },
                {
                    "type": "number",
                    "name": "number",
                    "displayName": "数值",
                    "value": 123
                }
            ]
        }
    ],
    "config": {
        "template": {
            "name": "child",
            "displayName": "系列",
            "value": [
                {
                    "type": "input",
                    "name": "input",
                    "displayName": "文本",
                    "value": "系列一"
                },
                {
                    "type": "number",
                    "name": "number",
                    "displayName": "数值",
                    "value": 100
                }
            ]
        }
    }
}

Example

14. image 图片上传

该控件仅允许用户上传image/*格式的文件，参考accept属性说明，也可以在图片类型上定义图片格式

配置项说明

config配置项说明

示例

{
    "name": "image",
    "displayName": "图片",
    "type": "image",
    "value": ""
}

Example

15. video 视频上传

该控件仅允许用户上传video/*格式的文件，参考accept属性说明，也可以定义视频的格式

配置项说明

config配置项说明

示例

{
    "name": "video",
    "displayName": "视频",
    "type": "video",
    "value": ""
}

Example

16. audio 音频上传

该控件仅允许用户上传audio/*格式的文件，参考accept属性说明，也可以定义音频的格式

配置项说明

config配置项说明

示例

{
    "name": "audio",
    "displayName": "音频",
    "type": "audio",
    "value": ""
}

Example

17. uploadModel模型上传

该控件允许用户上传模型类型的文件，如上传glb、gltf、fbx、obj等模型文件

配置项说明

config配置项说明

示例

{
    "name": "uploadModel",
    "displayName": "模型",
    "type": "uploadModel",
    "value": ""
}

Example

18. model 文件上传

该控件允许用户上传任何类型的文件，在某些环境下会很有用，比如上传json、obj、mtl、fbx、glb、gltf等模型或资源文件

配置项说明

示例

{
    "name": "model",
    "displayName": "文件",
    "type": "model",
    "value": ""
}

Example

19. font 字体

该控件给用户提供不同的字体类型选择，可选的字体列表由平台提供。

配置项说明

示例

{
    "type": "font",
    "name": "font",
    "displayName": "字体",
    "value": "Microsoft Yahei"
}

Example

20. json （需要easyv 平台 v4.13及以上）

该控件支持输入JSON对象，提供代码编辑器编辑，可支持全屏编辑。

配置项说明

config配置项说明

示例

{
    "type": "json",
    "name": "json",
    "displayName": "JSON",
    "value": "{}"
}

效果图

21. jscode （需要easyv 平台 v4.13及以上）

该控件支持编写js代码，提供代码编辑器编辑，可支持全屏编辑。

配置项说明

config配置项说明

示例

{
    "type": "jscode",
    "name": "js",
    "displayName": "JS",
    "value": "",
  	"config": {
    	"showGutter": true
    }
}

效果图

22. area(地图选择)

配置项说明

示例

{
  type: 'area',
	name: 'area',
  displayName: 'adCode',
  value: '100000'
}

23. grid(九宫格单选) （需要easyv 平台 v3.15及以上）

配置项说明

config配置项说明

示例

{
  type: 'grid',
	name: 'grid',
  displayName: '九宫格',
  value: 'center center',
  config: {
  	options: [
      "left top", 
      "center top", 
      "right top", 
      "left center", 
      "center center", 
      "right center",
      "left bottom",
      "center bottom",
      "right bottom"
    ]
  }
}

示例2

{
  type: 'grid',
	name: 'grid',
  displayName: '九宫格',
  value: 'center center',
  config: {
  	options: [
      "", 
      "center top", 
      "", 
      "left center", 
      "", 
      "right center",
      "",
      "center bottom",
      ""
    ]
  }
}

24. position(位置) （需要easyv 平台 v3.15及以上）

配置项说明

套件

25. shadow(阴影) （需要easyv 平台 v3.15及以上）

配置项说明

value值说明

示例

{
  type: 'shadow',
  name: 'shadow',
  displayName: '文本阴影',
  value: {
    color: '#fff',
    vShadow: 8,
    hShadow: -10,
    blur: 8
  }
}

示例2

{
  type: 'shadow',
  name: 'shadow',
  displayName: '形状阴影',
  value: {
    color: '#fff',
    vShadow: 8,
    hShadow: -10,
    blur: 8,
    spread: 8
  }
}

26. textStyle(文本样式) （需要easyv 平台 v3.15及以上）

配置项说明

value值说明

示例

{
  type: 'textStyle',
  name: 'textStyle',
  displayName: '文本样式',
  value: {
    fontFamily: 'Mircosoft Yahei',
    fontSize: 24,
    color: '#fff',
    bold: true,
    italic: false,
    letterSpacing: 0,
  	lineHeight: 3
  }
}

27. 布局类型

组合

示例

{
  type: 'group',
  name: 'group',
  displayName: '成组',
  value: [
    {
      type: 'number',
      name: 'number1',
      displayName: '数字1',
      value: 50,
      config: {
        span: 12
      }
    },
    {
      type: 'number',
      name: 'number2',
      displayName: '数字2',
      value: 60,
      config: {
        span: 12
      }
    }
  ]
}

28. 平台控件

该控件类型是平台独有的控件，用于满足特殊的使用场景，依据不同的类型，会有多个基本控件组合的展示形态和交互逻辑，并且可选内容会由平台动态填充

组件ID

平台提供各种各样的组件类型，为了提升可读性，将不同的组件从概念上做了划分，分为以下几种格式。

remoteOptions 远程控制

该控件是由多个内置的控件组合成的一组控件，统称为远程控制控件，包含事件和回调两种类型。

事件类型：通过关联需要远程控制的大屏上已经配置好的自定义事件，来获取交互的参数，通过平台提供的接口去触发事件。

大屏：需要远程控制的大屏

组件：需要远程控制的大屏中的组件

事件：需要远程控制的大屏中的组件的自定义事件列表，该组件必须已经设置过自定义事件

回调类型：通过在该组件上设置回调值，触发回调后，该回调值会映射到需要远程控制的大屏中。

大屏：需要远程控制的大屏

配置说明

示例配置

{
  "type": "remoteOptions",
	"name": "remoteOptions",
  "displayName": "远程控制",
  "value": "{}"	// value为JSON字符串 结构在下面
}

value

{
  type: 'event' | 'callback';
	component: string; // 用户选择的组件id e.g. $component(1)
  event: {	// JSON字符串 受控组件绑定的事件对象
  	type: string;	// 触发控制类型 e.g. click
    action: string;	// 触发后组件执行的动作 e.g. show/hide
    component: string;	// 受控组件的id e.g. $component(1)
    panel: {	// 受控面板(动态面板/引用面板)的数据对象 JSON字符串
      panelId: string;	// 面板id e.g. $panel(panel_1)
      stateId: string;	// 指定切换到面板中某个状态 e.g. $state(1)
    }
  }; 
  screen: string; // 用户选择的屏幕id e.g. $screen(1) 
}

imgSize 图片尺寸控件

外部 config 说明

value[i]值说明

示例

{
    "displayName": "图片尺寸",
    "name": "imgSize",
    "type": "imgSize",
    "config": {
        "lock": true
    },
    "value": [
        {
            "config": {
                "suffix": "px"
            },
            "name": "width",
            "displayName": "宽度",
            "value": 45,
            "type": "number"
        },
        {
            "config": {
                "suffix": "px"
            },
            "name": "height",
            "displayName": "高度",
            "value": 45,
            "type": "number"
        }
    ],
    
}

示例Demo下载

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~