Page History

...

Code Block

language	js
collapse	true

// 自定义组件渲染
<Widget
    type={type}
    value={currentValue}
    setValue={(v: any) => {
        this.store.updateConfig(v, boxName, index);
    }}
/>;
 
// 插件 demo
// json 配置
{
    "name": "自定义组件",
    "type": "bi.test.widget",
    "defaultValue": "1"
}
// 自定义组件实现，插件中实现，需要单独注入到 subjectPage
// bi.test.widget
render() {
    const { value, setValue } = this.options;
 
    return (
        <TextValueCombo
            simple
            value={value}
            height={24}
            items={[
                {
                    text: '选项1',
                    value: '1',
                },
                {
                    text: '选项2',
                    value: '2',
                },
            ]}
            listeners={[
                {
                    eventName: TextValueCombo.EVENT_CHANGE,
                    action: v => {
                        setValue(v);
                    },
                },
            ]}
        />
    );
}

场景：需要实现一些复杂的配置项

实现方式

请根据用户的数据类型，选择合适的事件

示例

这里以编辑框为例

Code Block

language	js
title	自定义组件.js
collapse	true

!(function () {
    /**
     * 自定义组件需优先注入到subject里
     */
    var Demo = BI.inherit(BI.Widget, {

        props: {
            baseCls: ""
        },

        render: function () {
            var self = this;
            // self.options包含上次的value和setValue方法
            debugger;
            return {
                type: "bi.vertical",
                width: 300,
                items: [
                    {
                        el: {
                            type: "bi.vertical_adapt",
                            items: [
                                {
                                    el: {
                                        type: "bi.label",
                                        text: "名称",
                                        textAlign: "left",
                                    },
                                    width: 70,
                                    rgap: 10,
                                },
                                {
                                    el: {
                                        type: "bi.editor",
                                        value: self.options.value, // 上次设置的value
                                        cls: "bi-border bi-border-radius",
                                        width: 150,
                                        allowClear: !1,
                                        height: 24,
                                        ref: function (e) {
                                            self.myNameEditor = e;
                                        },
                                        listeners: [
                                            {
                                                eventName: "EVENT_CHANGE",
                                                action: function () {
                                                    debugger;
                                                    // 设置value的方法，调用后会刷新页面
                                                    self.options.setValue(this.getValue());
                                                },
                                            },
                                        ],
                                    },
                                },
                            ],
                        },
                        tgap: 10,
                    }]
            };
        },

    });
    BI.shortcut("bi.amap.demo", Demo);
})();

配置json文件中，指定对应的配置

Image Added

效果图

Expand

title	效果图

Image Added

DEMO

上述效果图DEMO源码

Page tree

Versions Compared

Old Version 4

New Version 5

Key

实现方式

示例

效果图

DEMO