文档首页> Astro大屏应用 AstroCanvas> 用户指南> 自定义组件开发规范> 组件配置项（Config配置）> list
更新时间：2024-05-10 GMT+08:00
查看PDF
分享

list

配置项说明

表1 list配置项说明

参数

类型

是否必选

示例

说明

type

String

是

type: "list"

配置项类型。

name

String

是

name:"intervalColors"

双向绑定list名称。

label

Object

否

label: { "zh_CN": "中文标签", "en_US": "English Label" }

配置项的标签，需要国际化。

listFixed

Boolean

否

listFixed: true

列表个数固定，不展示新增、删除功能，默认为true展示。

labelOnce

Boolean

否

labelOnce: true

仅在list首项展示一次label。

  • 设置为true时，只有list中第一项展示list label。
  • 设置为false时，每一项都展示label。

showIndex

Boolean

否

showIndex: true

label末尾显示计数。

  • 设置为true时，label末尾进行计数(index+1)展示为label1，label2…。
  • 设置false时，每一个label内容相同。

displayMode

String

否

displayMode: “box”displayMode: “simple”

显示为下拉框中或平铺。

  • box：显示在下拉框中。
  • simple：直接显示。

events

Object

是

events: { addItemFunc: function (vm, index) { return { size: 1, color: 'rgba(11,129,246,1)'} }, itemDelCallBack: function (values) { if (values && values.length) { values[values.length - 1].size = 1; } }, },

增加和删除list中一项。默认有增加删除功能，所以需要添加addItemFunc和itemDelCallBack函数。 如果noAdd为true，不需要添加。

childItems

Array

是

childItems: [ { type: "colorpicker", name: "color", value: "rgba(11,129,246,1)", width: 26, showInput: false, }, { type: "input-number", name: "number", prop: "number", label: "序列号" originFrom: "advanceEditvm", value: "123", width: 74, labelWidth: 20, }]

list中每一项含有的基础配置项。

基础配置项中可以通过加入width调整一行中的占比，例如3个options的width是20,30,30，三个配置项就会出现在一行。如果width是20,30,70，前两个会在一行，第三个占第二行的70%。 如果不加入width或者width占比为100，就会单独占一行。 基础配置项中也增加了labelWidth，在有label的情况下可以通过输入数字控制label的宽度（单位为px）。

tip

Object

否

tip: { zh_CN: "当前排行榜展示的数据行数", en_US: "Number of data rows displayed in the current ranking page.", }

label后会显示info提示。

allowNone

Boolean

否

allowNone: true,

是否允许删除到空。默认为false，不允许删除到空。

helpLink

String

否

helpLink: "http://..."

使用helpIcon。

事件

表2 事件

事件名称

调用配置项中的方法

说明

回调参数

change

change

值改变时触发

(value, data, field)

addItemFunc

addAssembleType

单击新增时触发

(vm)

itemDelCallBack

delAssembleType

单击删除时触发

(value)

配置示例

  • 配置示例一，配置后效果如图1所示。
    {
    type: "list",
    name: "commProps.rowCusBg",
    displayMode: "simple",
    showLabel: false,
    labelOnce: true,
    allowNone: true,
    label: { zh_CN: "背景色", en_US: "Background Color" },
    helpLink:
    "https://***.html",
    showFunc: function (vm) {
        return vm.commProps.rowBgType === "custom";
    },
    events: {
        addItemFunc: function () {
            return { color: "rgba(11,129,246,1)", row: "" };
        },
    },
    childItems: [
        {
            type: "colorpicker",
            name: "color",
            originFrom: "advanceEditvm",
            value: "",
            width: 26,
            showInput: false,
        },
        {
            type: "string",
            name: "row",
            originFrom: "advanceEditvm",
            label: { zh_CN: "序列号", en_US: "Serial Number" },
            value: "",
            width: 74,
        },
    ],
},
    图1 示例一配置效果
  • 配置示例二，配置后效果如图2所示。
    {
    type: "list",
    name: "options.topSerialBg",
    displayMode: "simple",
    showLabel: false,
    labelOnce: true,
    allowNone: true,
    label: { zh_CN: "背景色", en_US: "Background Color" },
    helpLink:
    "https://***.html",
    showFunc: function (vm) {
        return (
            vm.commProps.showSerialNumber &&
            vm.options.showTopSerialNumber &&
            vm.options.topSerialStyle === "color"
        );
    },
}
    图2 示例二配置效果
父主题： 组件配置项（Config配置）
分享：

    相关文档

    相关产品