如何解决v-text-field添加图片后标签右移的问题

问题表现 #

在v-text-field中通过#prepend-inner插槽插入v-img实现图片前置后，组件标签向右偏移错位，手动添加margin-top样式调整无效。
原实现代码：

<v-text-field
  ref="phone"
  v-model="phone"
  dense
  outlined
  disabled
  color="black"
  :rule="[requiredRule]"
  :label="$t('10')"
  >
    <template #prepend-inner>
      <v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"> </v-img>
    </template>
</v-text-field>

异常效果截图：

修复方法 #

方法1：给前置图片加绝对定位脱离文档流 #

插槽默认会为内部元素计算占位宽度，导致标签起始位置被挤偏，给图片设置绝对定位后不会参与输入框内部的布局流计算，不会挤占标签位置：

<v-text-field
  ref="phone"
  v-model="phone"
  dense
  outlined
  disabled
  color="black"
  :rule="[requiredRule]"
  :label="$t('10')"
  >
    <template #prepend-inner>
      <v-img 
        style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%);" 
        max-height="25" 
        max-width="30" 
        src="/images/KW.png"
      ></v-img>
    </template>
</v-text-field>

left和尺寸数值可以根据实际设计稿微调对齐。

方法2：使用组件原生前置图标属性 #

直接用v-text-field自带的prepend-inner-icon属性传入图片地址，组件会自动完成布局适配，不会出现偏移问题：

<v-text-field
  ref="phone"
  v-model="phone"
  dense
  outlined
  disabled
  color="black"
  :rule="[requiredRule]"
  :label="$t('10')"
  prepend-inner-icon="/images/KW.png"
></v-text-field>

如果需要调整图标尺寸，可通过深度选择器修改内部.v-icon类的宽高属性即可。

内容的提问来源于stack exchange，提问作者Sarwan Nizamani