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

Question

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

      <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;
}

这是我的问题，带有明显的屏幕截图。

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

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

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

Answer 1

只需将您的输入和图标包装到一个 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 框架中的一些实用程序 classes 或创建自定义 CSS class。从 MDN docs 可以看出，绝对元素是相对于其最近定位的祖先定位的。

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

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

Vuejs - How can I fix the position of the eye icon in the password field?

css

input-field

vue.js

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

Vuejs - How can I fix the position of the eye icon in the password field?

css

input-field

vue.js

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