Ant Design 4.0 的一些杂事儿分享！

2022-03-05 18:26:46 1k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Protel 99 PCB添加汉字终极指南：原理、工具与避坑实践在电子设计自动化（EDA）领域，PCB设计是硬件实现的核心环节，其原理涉及电路布局、电气连接与制造工艺的协同。对于使用经典工具Protel 99 SE的设计者而言，在PCB层直接添加非拉丁字符（如汉字）常面临原生功能限制的技术挑战。这催生了通过第三方转换工具将汉字图形转化为标准PCB封装库的技术方案，其技术价值在于扩展了老款EDA软件在标注、标识方面的灵活性，无需修改软件底层即可满足产品型号、LOGO等中文信息标注的需求。应用场景广泛覆盖课程设计、老产品维护及特定制造要求。本文聚焦于利用“ProtelHz” 阅读详情

📝 想要了解 Ant Design 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注 Ant Design 官方专栏，这里常有关于 Ant Design 设计体系下相关话题内容的最新分享和讨论，如 Ant Design、AntV 可视化、Kitchen 设计插件、B 端产品设计、SaaS 产品设计、自然交互、增长设计、智能设计、设计工程化等。

☕️ 本篇集中给大家分享Ant Design 4.0 的一些杂事儿，分享知识，设计观点，欢迎打卡学习！

Ant Design 4.0 的一些杂事儿 - Overflow 篇

Ant Design 4.0 的一些杂事儿 - maxLength 篇

Ant Design 4.0 的一些杂事儿 - Trigger 篇

Ant Design 4.0 的一些杂事儿 - Overflow 篇

Ant Design 4.0 的一些杂事儿 - VirtualList 篇

Ant Design 4.0 的一些杂事儿 - Space 篇

Ant Design 4.0 ，脱离业务的框架都是耍流氓

蚂蚁金服 AntV G2 4.0 正式版发布！

...全文

从零开始：用ADS 2023手把手教你设计2.4GHz Wi-Fi LNA（基于ATF-54143，附模型文件）本文详细介绍了如何使用ADS 2023软件设计2.4GHz Wi-Fi频段的低噪声放大器(LNA)，基于ATF-54143晶体管。内容涵盖模型导入、直流工作点确定、稳定性优化、噪声匹配等关键步骤，并提供可下载的模型文件包，帮助工程师快速掌握LNA设计技巧。阅读详情

程序员可乐丶

新星创作者: Java技术领域

AntV开发者 50 成员 106 内容

+ 关注 + 加入社区

切换为时间正序

闫辉 2022-03-11

打赏
举报

Ant Design 4.0 的一些杂事儿 - VirtualList 篇
Ant Design 4.0 的一些杂事儿 - Space 篇
Ant Design 4.0 的一些杂事儿 - CI 篇
Ant Design 4.0 的一些杂事儿 - Table 篇
Ant Design 4.0 的一些杂事儿 - Form 篇
Ant Design 4.0 的一些杂事儿 - Select 篇
在平时的开发过程中，我们常常会遇到一些响应式的需求。一种常见的场景就是不同分辨率下，页面布局的变化：

这类需求，我们可以通过 css 很方便的实现。在 antd 中，我们也提供了 Grid 组件用于快速配置不同分辨率下的响应式展示。

截断

而另一类需求，则是根据内容动态进行响应式分配：

在 antd 中的 Select 组件中，我们支持 maxTagCount 属性用以配置超出多少条数据进行截断展示：

但是实际工作中，你会发现 maxTagCount 并不容易配置。它会随着 Select 以及其 Option 的宽度而变化。导致有时空间明明够却被截断了，而有时超出了宽度但是还没满足截断的情况：

maxTagCount 并不好算
在一个工整的布局中，这种折行很容易让人强迫症发作：

自然而然的，我们就在思考是否可以提供诸如 maxTagCount="responsive" 属性，自动帮用户进行截断处理？

Overflow

对于截断处理，我们需要先梳理一下相关流程：

你很快就会想到，如果对于值项过多的 value 似乎需要经过太多轮渲染才能出最终的稳定结果。此外当总体宽度变化时，你很难判断是应该减少值项还是添加值项。转变一下思路，我们其实可以在第一次渲染就获取所有值项的宽度再计算出适合的展示值从而将其复杂度降至 O(1)：

然而，我们其实并没有办法知道这个 + N... 项的宽度。例如 + 1... 和 + 999... 的宽度是不同的。我们实际上还是需要渲染出对应的数量的 + N... 才能知道最终匹配的结果如何。

每个可能性都渲染一个 Rest 节点
显而易见，如果这么做我们需要渲染 2*N 个 Rest 节点才能匹配出最佳展示内容，性价比过低（实际上，目前 Menu 的自动省略就是这个策略。我们也有计划将其进行改进）。

让子弹飞一会儿

如果不渲染 Rest 节点，我们的数据缺少一个宽度。但是我们可以假设已经知道了这个值，并在获取真正的宽度时再重新计算一遍，那么它就可以在有限的次数内匹配到正确值：

为了避免 dom 元素位置的反复改变，我们利用 flex 布局的 order 属性来保持结构稳定：

至此，自动截断的雏形也就完成了。

临界值问题

就如前面提到的，+ 1... 与 + 999... 宽度并不相同。即便是相同位数的数字宽度也会因为字体不同而不同，这就有可能出现一个临界值。在 + N... 的时候 Rest 宽度正好可以多放一个值项，而 + (N-1)... 的时候 Rest 的宽度正好又放不下一个值项。为了展示，我将 (N-1) 设置了更小的宽度以帮助理解：

永动机？~
我们会想到是否可以不同余数下的 Rest 宽度做一份记录。这样在计算时，可以顺带计算相邻余数的折行情况：

const restWidths = new Map<number, number>();

function onRestCountChange(count: number) {
restWidths.set(totalCount - count, restNode.offsetWidth);

let totalWidth = 0;
const records: { index: number, width: number }[] = [];

for (let i = 0; i < count; i += 1) {
const elementWidth = elements[i].offsetWidth;
const restWidth = restWidths.get(totalCount - i - 1) || 0'
totalWidth += elementWidth;

if (totalWidth + restWidth > containerWidth) {
  records.push({
    index: i - 1,
    width: totalWidth + restWidth - elementWidth,
  });
}

}

// Find best match...
records.forEach(...);
}
这很好，但是维护起来过于复杂。对于值项数量变化时我们还需要进行相关的清理操作。以免缓存过多务必要的数据。让我们再次考虑闪动的情况，你会发现我们其实只需要处理最近两个 Rest 的问题。而除了 Rest 的宽度会变化外，其余的元素宽度是确定的。所以我们在计算时，只需要取最近两次渲染 Rest 最大的宽度作为计算依据就可以防止闪动问题：

我们也省去了缓存数据需要清理的烦恼
最后

我们将这个功能封装到了 rc-overflow 中，你可以参考其中的代码示例来生成自己的响应式截断容器。为了支持 Select 组件搜索框长文本换行能力，我们还提供了 suffix 属性支持特定折行元素，其思路于上大同小异因而不再展开。在 4.10.0 中，Select 以及 TreeSelect 组件的 maxTagCount 将支持 responsive 配置实现自动响应式，欢迎尝鲜~

Ant Design 4.0 的一些杂事儿 分享！

相关推荐

Ant Design 4.0 的一些杂事儿分享！