服務區的晚霞

設計

input組件單獨使用時，在樣式上并沒有多花里胡哨，較為簡潔純粹。相較于element組件庫中的input組件，這里的實現上應該也就只有邊框顏色沒有特意設計(element有主題系統)。

功能的設計上也略微簡陋，沒有針對各種type做相應的實現，目前只實現了input的類型。沒實現的還有顯示icon以及設置組件自身大小。

效果

屬性

value，組件的核心功能，顯示輸入的內容，這也為該組件實現雙向綁定的必要條件之一。

disabled，組件狀態是否被禁用。

readonly，和禁用很像，只不過在表現形式上有略微差距，設置組件狀態是否只讀。

事件

change，輸入內容發生改變后觸發，但和input不同的是，change更“防抖”。

input，實時響應輸入框的值變化。

blur，輸入框的失焦事件，可用于相關狀態的綁定。

focus，當輸入框獲得焦點的事件。

代碼

:value="value"
type="text"
:disabled="disabled"
:readonly="readonly"
@change="$emit('change', $event.target.value)"
@focus="$emit('focus', $event.target.value)"
@blur="$emit('blur', $event.target.value)"
@input="$emit('input', $event.target.value)"
/>




創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的设置input标签禁用_Vue造轮子 | input组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。