一個設計不當的表單可能會使用戶遠離你的網站。幸運的是,對Vue開發者,有大量可用的Vue輸入庫讓你輕松整理表單。
擁有直觀而且對用戶友好的表單有諸多好處,比如:
- 更高的轉化率
- 更好的用戶體驗
- 更專業的品牌效果
就像其他主要的框架一樣,有大量的社區解決方案可用於構建優雅的Vue表單。從簡單的文本輸入到高級的電話數字模版,都有很多可供選擇。
這里是一些我常用到的Vue輸入庫。不過,這只是關於表單元素的一個清單,我也整理了一個Vue圖標庫的清單。
希望這些工具對你有幫助。
1、Vue Select
select標簽是表單經常用到的一個表單控件。如果你有使用過,應該知道自定義這個select標簽是很麻煩的。
幸運的是,Vue Select庫提供一種直觀的方式去添加這些功能,例如:
- 標記
- 搜索
- 過濾
- 支持Vuex
非常易用。

2、Vue Input標簽
Vue Input標簽庫可用在表單輸入添加標簽。例如:

3、Vue Dropdowns
Vue Dropdowns是另外一個處理select標簽的庫。不僅可以創建流暢的輸入,而且提供更好的方式去設置數據以及提供事件監聽比如change和blur。

4、Vue Color
在表單添加顏色選擇器,用Vue Color是最簡單的一個方式。如果要重新去計划及實施寫出來估計要好幾個小時。但是用Vue Color只需要幾分鍾的時間。

它具有幾種不同的樣式、事件鈎子以及支持不同的顏色格式。這個強烈推薦。
5、VueJS DatePicker
一個簡潔的日期選擇組件。

6、Vue Switches
一個精美的按鈕切換組件。

7、Vue Dropzone
Vue Dropzone 是一個拖放文件上傳的組件。簡單、強大。

8、Vue Circle Slider
一個圓形滑塊組件。

9、Vue Phone Number
一個電話號碼輸入組件,靈活且可定制化,包括:
- 驗證國家代碼
- 主題和顏色
- 電話號碼格式

后記
以上譯文僅用於學習交流,水平有限,難免有錯誤之處,敬請指正。
