如何将vee-validate密码输入框的显示按钮嵌入框内右侧？

我使用vee-validate实现了一个简单的密码输入字段，当前密码显示按钮位于输入框外部，希望将该按钮嵌入输入框内部并靠右放置，请问该如何实现？

当前代码 #

<div class="form-group mb-3 ">
    <div class="d-flex">
      <Field name="password" :type="password.fieldType" class="form-control col-12"
        :class="{ 'is-invalid': errors.password }" id="password" :placeholder="t('password')" />
      <div class="d-flex px-2" @click="toggleVisibility">
        <div class="my-auto" v-if="password.fieldType === 'password'">
          <i class="fa-solid fa-eye-slash"></i>
        </div>
        <div class="my-auto" v-if="password.fieldType === 'text'">
          <i class="fa-solid fa-eye"></i>
        </div>
      </div>
    </div>
    <div class="invalid-feedback">{{ t('passwordIsRequired') }}</div>
</div>

效果说明 #

• 当前效果：密码显示按钮独立于输入框右侧，是两个分离的元素
• 预期效果：密码显示按钮嵌入输入框内部右侧，视觉上与输入框融为一体

解决方案（基于Bootstrap实现） #

从你使用的form-control、d-flex等类来看，项目应该采用了Bootstrap框架，直接利用Bootstrap的input-group组件就能轻松实现内嵌效果，修改后的代码如下：

<div class="form-group mb-3">
  <div class="input-group">
    <Field 
      name="password" 
      :type="password.fieldType" 
      class="form-control"
      :class="{ 'is-invalid': errors.password }" 
      id="password" 
      :placeholder="t('password')" 
    />
    <button 
      class="btn btn-outline-secondary" 
      type="button" 
      @click="toggleVisibility"
      style="border-left: none;"
    >
      <i class="fa-solid" :class="password.fieldType === 'password' ? 'fa-eye-slash' : 'fa-eye'"></i>
    </button>
  </div>
  <div class="invalid-feedback">{{ t('passwordIsRequired') }}</div>
</div>

关键修改点 #

1. 替换容器：把原来的d-flex容器换成Bootstrap的input-group，这是官方专门用于输入框附加元素的布局组件
2. 优化按钮：将原来的div点击区域换成语义化的button标签，添加Bootstrap按钮类，并通过border-left: none消除按钮与输入框之间的边框，让视觉更统一
3. 简化图标逻辑：用动态class直接切换图标样式，减少冗余的v-if判断

如果不想用button标签，也可以通过自定义定位实现：给输入框的父容器设置position: relative，然后给按钮div添加如下样式：

position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;

但推荐使用Bootstrap的input-group方案，更符合框架规范且兼容性更好。

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