Vuejs - 如何修复密码字段中眼睛图标的位​​置？

如何解决Vuejs - 如何修复密码字段中眼睛图标的位​​置？

我在密码输入字段的右端放置了一个眼睛图标。但是，我的一些错误消息可能会不时出现在页面上，以表明我的输入字段存在问题。由于这些错误消息出现在相关输入字段下，因此我放置在密码字段中的眼睛图标的位​​置发生了变化。这是我的带有眼睛图标的密码字段。 （要以文本格式查看密码，用户需要点击并按住。）

      <div>
        <label></label>
        <input :type="show ? 'text' : 'password'" id="password" v-model="password"/>
        <div class="eyeButton">
          <span @mousedown="show = !show" @mouseup="show = !show" @touchstart="show = !show" @touchend="show = !show" style="cursor: pointer;">eye_icon</span>
        </div>
        <small class="errorMessage" v-if="password.error">Password field is required.</small>    
      </div>

忽略带有错误消息的那一行。与原始代码相比，我稍微简化了它，因为它在问题中无关紧要。我只是把它留给你看看那里有条件错误消息。

还有一些额外的 CSS 可以将眼睛图标放在密码输入字段中。

.eyeButton {
  position: absolute;
  right: 5px;
  bottom: 4px;
  top: 23px;
}

这是我的问题，有一个明显的截图。

即使错误消息出现在输入字段下方，眼睛图标也应如下所示。

但是当错误信息添加到页面时，眼睛图标的位​​置自然也会发生变化。我需要摆脱它。这是它的外观；

如何调整眼睛图标的位​​置来配合输入框？

解决方法

只需将您的输入和图标包装到一个具有相对位置的 div 中，如下所示：

<div style="position: relative">
  <input :type="show ? 'text' : 'password'" id="password" v-model="password"/>
  <div class="eyeButton">
    <span @mousedown="show = !show" @mouseup="show = !show" @touchstart="show = !show" @touchend="show = !show" style="cursor: pointer;">eye_icon</span>
  </div>
</div>
<small class="errorMessage" v-if="password.error">Password field is required.</small>

当然，我建议使用 CSS 框架中的一些实用程序类或创建自定义 CSS 类。从 MDN docs 中，您可以了解到绝对元素的位置是相对于其最近定位的祖先。

否则，您也可以从 bottom: 4px; 中删除 .eyeButton。