a-textarea(textarea)出現模糊問題的可能解決方案

m1pha發表於2024-04-25

a-textarea(textarea)出現模糊問題的可能解決方案

專案介紹：本專案是一個vue3+ant-design-vue4.x開發，是一個客服機器人的元件。其它專案透過iframe+js檔案來引入(iframe的內容就是表單，入口按鈕是透過js檔案進行dom操作建立)。

透過js監聽頁面寬度，然後透過transform來適配不同解析度。

iframe+transform，出bug似乎也不奇怪~

這期間也因為transform出現過模糊bug，但這篇文章的重點是textarea。

大致的情況如圖：

在出現捲軸的時候，表單變得非常模糊。

而沒有捲軸的時候：

頁面就又恢復了清晰。

猜測原因:textarea本身高度不可控，chrome核心的瀏覽器在某些情況下（比如本專案的iframe+transform+捲軸+textarea邊框）計算錯誤。用firefox瀏覽器顯示是正確的。

解決方法：

textarea {
    border-radius: 0px;
}

這一行就讓表單不模糊了。雖然解決方案只有一條，但這一條也是蒙出來的。

這個時候樣式會變得很醜，也許你可以考慮給它的父元素加一點樣式。

下面是我隨便寫的，同樣很醜：

<a-form-item :label="$t('issueDescription')" name="note" class="form-description">
      <a-textarea
        v-model:value="formState.note"
        :placeholder="$t('inputPlaceholder')"
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
</a-form-item>

.form-description :deep(.ant-form-item-control-input-content) {
  border-width: 1px;
  border-style: solid;
  border-color: white;
  border-radius: 6px;
  textarea {
    border-radius: 0px;
  }
}

這個方法可能不適用於你的專案，對我來說也是玄學。如果有大佬知道具體原因，求指點~

相關文章