下拉组件的input height 会被选中的tag影响,没有看源码,猜测会有计算逻辑,在我的项目中,未改动前.el-tag--mini的height值为20,当tag到第二行后,撑开的input高度会在58、59来回跳动,导致抖动问题,最简单但不治根本的做法是改变.el-tag--mini高度,最佳的还是从elementUI源码角度解决
<style lang="scss" scoped>
.branch-list_content {
/deep/ .el-tag--mini {
height: 21px;
}
}
</style>
同遇到这个问题,查看源码后初步确认是resetHeight这个方法导致的,只不过没想到为何会计算出来的结果会不一样
resetInputHeight() {
if (this.collapseTags && !this.filterable) return;
this.$nextTick(() => {
if (!this.$refs.reference) return;
let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
const tags = this.$refs.tags;
const sizeInMap = this.initialInputHeight || 40;
input.style.height = this.selected.length === 0
? sizeInMap + 'px'
: Math.max(
tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
sizeInMap
) + 'px';
if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper');
}
});
},
详见(github issue#20552): select 多选抖动 ⇲
相关 fixed ⇲
只需要给 el-tag
设置 margin
即可
.el-tag { margin: 1px }
问题应该是谷歌浏览器版本问题。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
我也遇到这个问题,想问有解决了吗