update

README.md

@@ -4,6 +4,8 @@ FineUI 100个问题题,带你走进FineUI的世界
 
 此系列内容来源于日常开发积累与沉淀,用于大家学习交流与项目中踩坑,掌握一些api文档之外的进阶技巧
 
+每一篇md会结合实际场景或问题背景,来阐述原因和解决方案
+
 ## 100-Questions列表
 
 ---
@@ -14,7 +16,7 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [1、前端如何正确书写资源路径](./questions/50.前端如何正确书写资源路径.md)
 - [2、组件的代码设计基本思路](./questions/2.组件的代码设计基本思路.md)
 - [3、关于组件引用的奥秘,ref知多少](./questions/3.关于组件引用的奥秘,ref知多少.md)
-
+- [4、使用ButtonGroup控制可点击组件的控制选中状态](./questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)
 
 ### 布局篇
 

questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md

@@ -0,0 +1,115 @@
+# 使用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",
+        },
+    ],
+}
+```
+
+![示例](../images/13.gif)
+
+为了实现真正的单选效果,我们需要进行状态控制,尽管如此,选中状态还是会跳来跳去,如果选项比较多的话将是个灾难
+
+```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());
+            },
+        },
+    ],
+});
+```
+
+![示例](../images/14.gif)
+
+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,
+        },
+    ],
+});
+```
+
+![示例](../images/15.gif)
+
+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,
+        },
+    ],
+});
+```
+
+![示例](../images/16.gif)

questions/80.combo的一些特性详解.md

@@ -4,6 +4,36 @@
 
 去掉combo的默认弹出事件,手动控制showView,在某些场景中很有用.例如需要控制有些场景要弹出,有些场景不要弹出.
 
+例如BI业务中有一个场景,叫做"开启权限继承后气泡提示"
+
+![示例](../images/17.gif)
+
+```demo
+let combo;
+let switchBtn;
+
+BI.createWidget({
+    type: "bi.bubble_combo",
+    ref: (ref) => combo = ref,
+    el: {
+        type: "bi.switch",
+        ref: (ref) => switchBtn = ref,
+        handler: () => {
+            switchBtn.isSelected() ? combo.showView() : combo.hideView();
+        },
+    },
+    trigger: "",
+    popup: {
+        el: {
+            type: "bi.label",
+            text: "提示文字",
+        },
+    },
+});
+```
+
+另一个场景,有些提示文本提示一次后不再提示,
+
 ```demo
 
 let combo;