diff --git a/README.md b/README.md index 0f4c17d..2b9ba63 100644 --- a/README.md +++ b/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) ### 布局篇 diff --git a/images/13.gif b/images/13.gif new file mode 100644 index 0000000..5b0ab1e Binary files /dev/null and b/images/13.gif differ diff --git a/images/14.gif b/images/14.gif new file mode 100644 index 0000000..a872b89 Binary files /dev/null and b/images/14.gif differ diff --git a/images/15.gif b/images/15.gif new file mode 100644 index 0000000..c821b83 Binary files /dev/null and b/images/15.gif differ diff --git a/images/16.gif b/images/16.gif new file mode 100644 index 0000000..d3f2448 Binary files /dev/null and b/images/16.gif differ diff --git a/images/17.gif b/images/17.gif new file mode 100644 index 0000000..6fada38 Binary files /dev/null and b/images/17.gif differ diff --git a/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md b/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md new file mode 100644 index 0000000..0e5a1a9 --- /dev/null +++ b/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) diff --git a/questions/80.combo的一些特性详解.md b/questions/80.combo的一些特性详解.md index 53e598a..84f96d3 100644 --- a/questions/80.combo的一些特性详解.md +++ b/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;