Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tree组件节点文本过多省略 #332

Merged
merged 1 commit into from
Jun 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/tree/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@
flex-grow: 1;
align-items: center;
height: @data-input-height-base;
// 可阻止被子元素撑开宽度
min-width: 0;
&-prefix {
display: inline-flex;
margin-right: @padding-xs;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码的改动很小,主要在第五行添加了一个注释并在第七行添加了一个CSS属性。在第七行,添加min-width: 0可以确保这个元素不被它的子元素撑开,这在处理输入框等容器时很有用。

在代码质量方面,这段代码看起来很不错,没有明显的错误或潜在的问题。改动也很小,并且添加了一个有用的注释。如果一切正常,这个补丁是安全的,并且可以推荐合并到生产代码库中。

Expand Down
2 changes: 0 additions & 2 deletions components/tree/style/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
import '../../style';
import '../../checkbox/style';
import '../../virtual-list/style';
import './index.less';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码补丁移除了对两个样式文件的引用,并添加了一个新的样式文件。

可以考虑做一下以下改进:

  • 检查是否存在其他地方依赖于所移除的两个样式文件。如果有,需要找到替代方案以避免出现样式问题。
  • 确认新的样式文件是否正确地包含了所需的样式。

2 changes: 1 addition & 1 deletion components/tree/tree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { defineComponent, provide, VNodeChild } from 'vue';
import { isFunction, isString } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import VirtualList from '../virtual-list/virtualList';
import VirtualList from '../virtual-list';
import TreeNode from './treeNode';
import { COMPONENT_NAME } from './const';
import useData from './useData';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码补丁看起来很简单并且改变不大,只是更改了输入的一个虚拟列表组件的引入路径。提供的组件名称没有改变,所以我认为这种更改不会对代码的功能造成负面影响。

如果在更新时遇到问题,那可能是由于依赖项的差异引起的,请确保您已经安装了正确的所有依赖项和版本。

Expand Down
10 changes: 6 additions & 4 deletions components/tree/treeNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { isUndefined } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import CaretDownOutlined from '../icon/CaretDownOutlined';
import LoadingOutlined from '../icon/LoadingOutlined';
import Checkbox from '../checkbox/checkbox.vue';
import Checkbox from '../checkbox';
import FEllipsis from '../ellipsis';
import { COMPONENT_NAME, INDENT } from './const';
import useTreeNode from './useTreeNode';

Expand Down Expand Up @@ -246,9 +247,10 @@ export default defineComponent({
onClick={handleClickContent}
>
{renderPrefix()}
<span class={`${prefixCls}-content-label`}>
{props.label}
</span>
<FEllipsis
class={`${prefixCls}-content-label`}
content={props.label}
/>
{renderSuffix()}
</span>
</div>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码是针对一个组件的做出的修改。从Git Patch格式可以看出,主要修改了import Checkbox和import FEllipsis两个模块的位置,并且在label显示时引入了一个新的组件——FEllipsis。

建议可以进一步了解 import 中{}与不加{}的区别,以及 defineComponent 的作用和原理。

在代码逻辑方面,没有发现明显的bug风险;在代码编写风格上,统一格式更好可读性更强。

Expand Down