三行JS代码配合css解决element-ui selecct组件选项文本过长bug

项目中用到可下拉选择可输入框,于是自然想到element-ui的select组件。当select组件的下拉选项不满足要求时用户可以输入自己需要的选项。那么问题来了。在某种特殊的情况下,输入的文本过长,而select组件的宽度是固定的(从页面美观的角度基本不允许文本框宽度自适应),这样输入的文本会溢出select组件。
接下来我们分两步来解决这个问题。

1)CSS控制宽度,给输入项一个固定的宽度,当文本超过指定宽度会显示省略号

.el-select__tags-text {
      display: inline-block;
      width: 40px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap; 
}

2)如何显示全部文本

方法一:伪类

当鼠标移动到文本上时,宽度width:auto;此时能显示全部内容,但有个明显的确定会对布局产生破坏。

方法二: 动态添加title

这是本文的重点,当给输入项或者选择项设置一个title时,鼠标移动到选项上会显示title的全部内容。所以问题的关键是如何动态的给每个select组件选项动态添加title.请看下面图片和代码。
这里写图片描述

setTagTitle() {
        var tagTextList = document.querySelector('#app').querySelectorAll('.el-select__tags-text')
        tagTextList.forEach( (item) => {
          item.setAttribute('title', item.innerText)
        })
 }

输入项对应的span标签class名为el-select__tags-text,通过选择器querySelector选择所有的选项。然后对所有的选项进行遍历动态添加title属性。title的值就是每个选项的文本值。那么这个事件如何触发呢,可以监听select组件的visible-change事件。
这里写图片描述

第二种方式是我能想到比较好解决过长文本的bug。如果你有更好的解决方法,欢迎来交流。

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值