【仅供内部供应商使用,不提供对外解答和培训】
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
// 自定义组件渲染
<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);
},
},
]}
/>
);
} |
场景:需要实现一些复杂的配置项
请根据用户的数据类型,选择合适的事件自定义一个组件,然后注入到subject里,配置文件,指定该组件的type
这里以编辑框为例
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
!(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);
})(); |
...