You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.7 KiB
116 lines
2.7 KiB
2 years ago
|
# 使用ButtonGroup控制可点击组件的控制选中状态
|
||
|
|
|
||
|
|
先看如下示例,被选中的radio,再次点击,会使其取消选中,大多数时候这不符合我们的预期
|
||
|
|
```demo
|
||
|
|
{
|
||
|
|
type: "bi.vertical_adapt",
|
||
|
|
height: 30,
|
||
|
|
scrollable: false,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
text: "选项1",
|
||
|
|
}, {
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
text: "选项2",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
为了实现真正的单选效果,我们需要进行状态控制,尽管如此,选中状态还是会跳来跳去,如果选项比较多的话将是个灾难
|
||
|
|
|
||
|
|
```demo
|
||
|
|
const radios = [];
|
||
|
|
|
||
|
|
const widget = BI.createWidget({
|
||
|
|
type: "bi.vertical_adapt",
|
||
|
|
height: 30,
|
||
|
|
scrollable: false,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
ref: function (_ref) {
|
||
|
|
radios[0] = _ref;
|
||
|
|
},
|
||
|
|
text: "选项1",
|
||
|
|
handler: () => {
|
||
|
|
radios[1].setSelected(!radios[0].isSelected());
|
||
|
|
},
|
||
|
|
}, {
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
ref: function (_ref) {
|
||
|
|
radios[1] = _ref;
|
||
|
|
},
|
||
|
|
text: "选项2",
|
||
|
|
handler: () => {
|
||
|
|
radios[0].setSelected(!radios[1].isSelected());
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
FineUI中提供了ButtonGroup控件,名字叫逻辑列表.他内部封装了选中逻辑控制,简单几行代码,就可以实现一个选项切换
|
||
|
|
|
||
|
|
```demo
|
||
|
|
const widget = BI.createWidget({
|
||
|
|
type: "bi.button_group",
|
||
|
|
height: 30,
|
||
|
|
layouts: {
|
||
|
|
type: "bi.vertical_adapt",
|
||
|
|
},
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
text: "选项1",
|
||
|
|
value: 1,
|
||
|
|
}, {
|
||
|
|
type: "bi.single_select_radio_item",
|
||
|
|
text: "选项2",
|
||
|
|
value: 2,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
ButtonGroup组件的默认chooseType属性为单选,也可以实现多选
|
||
|
|
|
||
|
|
```demo
|
||
|
|
const widget = BI.createWidget({
|
||
|
|
type: "bi.button_group",
|
||
|
|
height: 30,
|
||
|
|
layouts: {
|
||
|
|
type: "bi.vertical_adapt",
|
||
|
|
},
|
||
|
|
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.multi_select_item",
|
||
|
|
text: "选项1",
|
||
|
|
value: 1,
|
||
|
|
}, {
|
||
|
|
type: "bi.multi_select_item",
|
||
|
|
text: "选项2",
|
||
|
|
value: 2,
|
||
|
|
}, {
|
||
|
|
type: "bi.multi_select_item",
|
||
|
|
text: "选项3",
|
||
|
|
value: 3,
|
||
|
|
}, {
|
||
|
|
type: "bi.multi_select_item",
|
||
|
|
text: "选项4",
|
||
|
|
value: 4,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|