在项目中用了【饿了么】的UI框架,使用select组件时,设置multiple属性之后,多选出现2行以上有可能会出现一直抖动的情况(晃得眼睛都花了),我用谷歌和360浏览器试了都会出现这种情况。
造成这个的原因主要是.el-select里面的.el-input__inner的高度计算问题,一直在频繁切换,如图:
刚开始试着在网上找了解决方法,但是都没有用,所以用自己的方法解决一下,就是用样式覆盖.el-input__inner的高度,然后改下样式来实现,代码如下:
.el-select {
position: relative;
.el-select__tags {
position: inherit;
transform: translateY(0);
padding: 3px 0;
min-height: 28px;
}
.el-select__tags ~ .el-input {
height: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
.el-input__inner {
min-height: 20px;
height: 100% !important;
}
}
.el-select__input.is-mini {
min-height: 20px;
}
}
注:希望能帮到同样遇到这个问题的小伙伴,如果大家有更好的解决方法,欢迎留言评论~~~