【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠

在这里插入图片描述

解决NZ-ZORRO的treeSelect组件查询时输入文字出现重叠

版本

angular:9.x
nz-zorro:9.x
nz-zorro官网

问题

<nz-tree-select
  [nzDropdownMatchSelectWidth]="false"
  style="width: 180px;"
  nzAllowClear
  [(ngModel)]="type"
  [nzNodes]="searchNodes"
  [nzCheckStrictly]="true"
  nzShowSearch
  nzPlaceHolder="请选择模版类型"
  [nzDropdownStyle]="{'max-height':'220px'}"
>
</nz-tree-select>

在这里插入图片描述

分析

在这里插入图片描述

在这里插入图片描述
当点击搜索框的时候,这时候会添加.ant-select-single.ant-select-open .ant-select-selection-item 的样式,作用就是让文字的不透明度设为0.4。
于是,这里我们可以通过将opacity设置为0,进行透明化,这样就不会出现重叠了

解决

//解决ng-zorro-antd低版本的treeSelect的bug(选中后文字透明,就不会出现重叠的情况了)
.ant-select-single.ant-select-open .ant-select-selection-item{
    opacity: 0;
}

在这里插入图片描述

该问题在10.x的版本中已经修复了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值