Vuejs - 如何修復密碼字段中眼睛圖標的 position？

Question

我在密碼輸入字段的右端放了一個眼睛圖標。 但是，我的一些錯誤消息可能會不時出現在頁面上，以表明我的輸入字段存在問題。 由於這些錯誤消息出現在相關輸入字段下，因此我放置在密碼字段中的眼睛圖標的 position 發生了變化。 這是我的帶有眼睛圖標的密碼字段。 （要查看文本格式的密碼，用戶需要單擊並按住。）

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

這是我的問題，帶有明顯的屏幕截圖。

即使錯誤消息出現在輸入字段下方，眼睛圖標也應如下所示。

但是當錯誤信息被添加到頁面時，眼睛圖標的position自然也會發生變化。 我需要擺脫它。 這是它的外觀；

如何調整眼睛圖標的position與輸入欄配合？

Answer 1

只需將您的輸入和圖標包裝到一個具有相對 position 的 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 class。 從MDN 文檔中，您可以讀到絕對元素的定位是相對於其最近的定位祖先。

否則你也可以刪除bottom: 4px; 來自.eyeButton 。