diff --git a/README.md b/README.md index 74e69f4..5319e67 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ FineUI 100个问题题,带你走进FineUI的世界 - [29、为什么说随意修改原始数据时万恶之源?](./questions/35.文件上传控件多次选择文件和自定义校验.md) - [30、空状态提示的若干种实现方式](./questions/35.文件上传控件多次选择文件和自定义校验.md) - [31、在computed和响应式中谨慎使用中断](./questions/35.文件上传控件多次选择文件和自定义校验.md) +- [32、有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条](./questions/32.有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条.md) +- [33、如何快速的封装自定义combo](./questions/35.文件上传控件多次选择文件和自定义校验.md) ### 代码之外 diff --git a/images/39.png b/images/39.png new file mode 100644 index 0000000..64253aa Binary files /dev/null and b/images/39.png differ diff --git a/images/40.png b/images/40.png new file mode 100644 index 0000000..f3b1636 Binary files /dev/null and b/images/40.png differ diff --git a/images/41.png b/images/41.png new file mode 100644 index 0000000..e9b5fbb Binary files /dev/null and b/images/41.png differ diff --git a/images/42.png b/images/42.png new file mode 100644 index 0000000..22f6433 Binary files /dev/null and b/images/42.png differ diff --git a/images/43.png b/images/43.png new file mode 100644 index 0000000..6d9c58d Binary files /dev/null and b/images/43.png differ diff --git a/images/44.png b/images/44.png new file mode 100644 index 0000000..03f3af3 Binary files /dev/null and b/images/44.png differ diff --git a/images/企业微信截图_16641571537515.png b/images/企业微信截图_16641571537515.png new file mode 100644 index 0000000..7a81740 Binary files /dev/null and b/images/企业微信截图_16641571537515.png differ diff --git a/questions/31.md b/questions/31.md new file mode 100644 index 0000000..70c4f27 --- /dev/null +++ b/questions/31.md @@ -0,0 +1,63 @@ +let selectedValues = ["1", "2"]; + +var Model = BI.inherit(Fix.Model, { +state: function () { +return { +selectedValues: ["1", "2"], +} +}, +computed: { +selectedNodes: function () { +return this.model.selectedValues; +} +}, +actions: { +setSelectedValue: function (v) { +this.model.selectedValues = v; +} +} +}) +BI.model("demo_chooser_combo", Model); + +var model = BI.Models.getModel("demo_chooser_combo"); + +BI.createWidget({ +type: "bi.value_chooser_no_bar_combo", +ref: (_ref) => { +this.combo = _ref; +}, +value: model.model.selectedValues, +items: [ +{ +text: "11", +value: "1", +disabled: () => { +var isSelected = !!model.model.selectedNodes.find(value => value === "1"); +return !isSelected && model.model.selectedNodes.length >= 2; +} +}, { +text: "22", +value: "2", +disabled: () => { +var isSelected = !!model.model.selectedNodes.find(value => value === "2"); +return !isSelected && model.model.selectedNodes.length >= 2; +} +}, { +text: "33", +value: "3", +disabled: () => { +var isSelected = !!model.model.selectedNodes.find(value => value === "3"); +return !isSelected && model.model.selectedNodes.length >= 2; +} +} +], +listeners: [ +{ +eventName: BI.ValueChooserNoBarCombo.EVENT_CLICK_ITEM, +action: () => { +const selectedNodesID = this.combo.getValue(); +model.setSelectedValue(selectedNodesID); +}, +} +] +}); diff --git a/questions/32.有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条.md b/questions/32.有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条.md new file mode 100644 index 0000000..13ae407 --- /dev/null +++ b/questions/32.有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条.md @@ -0,0 +1,148 @@ +# 有没有一种布局方式，在文本保持垂直居中的情况下，文本很多时，可以限制其不超出外层高度 并出现滚动条 + +## 场景再现 + +业务中场景的confirm框,警示图标加文字的结构.要求是图标和文字水平垂直居中,文字过长时优先占满横向空间,横向空间不足时自动换行以及出现滚动条. + +![示例1](../images/39.png) +![示例1](../images/40.png) + +首先,文字自动换行,我们需要为label添加`whiteSpace: "normal" + +## 旧时代的布局策略 + +传统布局下,图标与文字同时水平居中,我们最先想到的就是`bi.center_adapt`,在旧时代的水平垂直居中实现采用的是`display:inline-block`方式,容器设置`text-align:center`同时对每个子元素 +设置`vertical-align:middle` + +```javascript + { + type: "bi.inline_center_adapt", + items: [ + { + el: { + type: "bi.icon_label", + cls: o.iconCls + " icon-size-50", + width: 50, + }, + }, { + el: { + type: "bi.label", + cls: "content-text", + text: this.options.text, + whiteSpace: "normal", + textAlign: "left", + lgap: 10, + }, + }, + ], + }; +``` + +看起来一切都那么完美,但是当文字超长的时候,文字在垂直平方向上不受束缚的扩张,水平方向也超出了容器 + +![示例3](../images/43.png) + +有的朋友可能会想到了,那么给文字设置一个`max-wdith`样式,数值为容器宽度减去提示图标宽度.接下来在添加一个`max-height:100%`,这样文本区域的长和宽都被束缚住了 +姑且不谈这样定宽是否考虑了通用性与自适应场景.看一下效果:文字确实换行了,但是在竖直方向上也可以正常出现滚动条 + +## 新时代的flex + +FineUI在现代浏览器上对大多数布局组件的实现策略都是基于flex的,那么flex布局处理这种场景是不是更加简便呢? + +flex实现水平居中设置`justify-content:center`即可,对应到布局组件的属性为`horizontalAlign:center`(此处指水平方向布局) +限制文本换行后内容高度不会超过容器,那么需要设定`align-items:stretch`,对应到对应到布局组件的属性为`verticalAlign:center`(此处指水平方向布局) + +是不是so easy,理想很丰满,但是现实是文字并没有自动换行,而是超出了容器.因为我们的`justify-content:center`,致使flex总是让子项目居中分布即使是左右都超出了容器 + +```javascript + { + type: "bi.flex_center_adapt", + items: [ + { + el: { + type: "bi.icon_label", + cls: o.iconCls + " icon-size-50", + width: 50, + }, + }, { + el: { + type: "bi.label", + cls: "content-text", + text: this.options.text, + whiteSpace: "normal", + textAlign: "left", + lgap: 10, + }, + }, + ], + }; +``` + +![示例3](../images/44.png) + +连老王都不知道flex是个好东西还是个不好的东西,我们就不对flex的好与坏进行评判了.只要探究该如何解决问题 + +参考旧时代解决方案,对label文本添加一个`max-wdith`样式,这样便满足了功能需求. + +但是,这个方案完美吗?`max-width`的具体值,需要根据容器宽度指定,这样使组件失去了复用性和独立性,倘若哪天popover尺寸规范变了,`max-width`的值也需要随之变更. + +既然`max-width`是不固定的,那使用calc可以吗?`max-width:calc(100% - 50px)`.当然可以,这样更精确,但是,`100%`是相对谁的,百分百确定吗? + +多数情况下,能够合理利用max-width控制,实现功能效果,就已经超越大多数布局使用者了.精益求精的话,有没有完美的方案呢? + +拓展思路,将问题进行拆分,拆分为两个问题解决.首先需要垂直水平居中,然后需要图标宽度固定和文字随内容增加占满剩余空间. + +为了实现水平垂直居中,我们需要设置如下props +```javascript + verticalAlign: "middle", + horizontalAlign: "center", +``` +映射到flex属性即为 +```css + justify-content: center; + align-items: center; +``` + +图标宽度固定,则其在flex容器内既不拉伸也不收缩,文字随内容增加占满剩余空间,则其在空间剩余时不会拉伸,在空间不足时将自动收缩,那么props为 +```javascript +columnSize: [50, ""] +``` +映射到flex属性,图标: +```css + flex-grow: 0; + flex-shrink: 0; +``` +label文字 +```css + flex-grow: 0; + flex-shrink: 1; +``` + +最终基于FineUI布局组件的的完整实现方式 +```javascript + { + type: "bi.horizontal", + verticalAlign: "stretch", + horizontalAlign: "center", + scrollx: false, + columnSize: [50, ""], + items: [ + { + el: { + type: "bi.icon_label", + cls: o.iconCls + " icon-size-50", + width: 50, + }, + }, { + el: { + type: "bi.label", + cls: "content-text", + text: this.options.text, + whiteSpace: "normal", + textAlign: "left", + lgap: 10, + }, + }, + ], +}; +``` diff --git a/questions/z-index解析以及在FineUI中使用原则.md b/questions/z-index解析以及在FineUI中使用原则.md index c8191fe..b50290f 100644 --- a/questions/z-index解析以及在FineUI中使用原则.md +++ b/questions/z-index解析以及在FineUI中使用原则.md @@ -65,7 +65,7 @@ BI.createWidget({ - position:fixed 或 position:sticky - 父容器是 display:flex 或 display:grid 且子元素自己带有z-index属性 - transform属性 -- isolation: isolation 直接创建上下文 +- isolation: isolation 直接创建上下文,这是一个毫无副作用无痛创建stacking context的方式 如果觉得通过查看代码不能够直观的分辨stacking contexts,那么推荐一个插件[CSS Stacking Context inspector](https://chrome.google.com/webstore/detail/css-stacking-context-insp/apjeljpachdcjkgnamgppgfkmddadcki) 能够自动识别stacking context结构,并注明产生stacking context的原因