自定义组件＜IP输入框＞在el-form的不同size中出现显示异常的BUG及修复

本文详细分析了一个自定义IP输入框组件在与不同size的el-form结合使用时出现的样式错误。问题源于form的size差异导致组件间距变化，进而影响了显示。通过对比正确和错误的CSS样式，找出问题关键在于行内元素的间距。解决方案包括调整组件尺寸以适应form的size变化或修改错误显示的form size为small。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景复现：

在一次自定义IP输入框组件的应用中，因为el-form的size设置不同，导致组件的样式显示出错，场景复现如图：

显示正常的图片显示错误的图片
因为是同一个组件的复用，因此定位于不同form表单的css差异性

原因分析：

显示正确的css：

请添加图片描述
在这里插入图片描述

显示错误的css：

在这里插入图片描述

显然，显示错误的这一组中，el-input__inner距离top的距离远了不少，但是其他的样式信息都是一致，因此怀疑因为form的size不同，导致其上下边距出现差异
继续检查.el-form-item

在这里插入图片描述

因为错误是出现在行内的，所以padding、border、margin都不必关注
可以确认的是mSize的form确实比s的在行内高了4px，又因为行内元素是上下等距，所以el-input__inner在mSize的form中上下边距和为36px-26px=10px，等分一下就是上下各5px。因此el-input__inner的底边所处的y坐标即为行内5+26=31px，但是因为其外部的el-input–medium是从ip-box的行内，而ip-box有一个px的边框，所以把el-input__inner的底边往下挤了一个px，即到了32px，刚刚好把ip-box的底部border挡住了，导致显示错误。

计算正确的sSize的form，el-input__inner上下距离都为（32px-26px）/2=3px，加上border的1px，距离top为4px，距离bottom2px，最底边位于4+26=30px，不会挡住ip-box在y方向上32px的底边border，因此没有显示错误。