【譯】強化表單的9個Vue輸入庫

一個設計不當的表單可能會使用戶遠離你的網站。幸運的是，對Vue開發者，有大量可用的Vue輸入庫讓你輕鬆整理表單。

擁有直觀並且對用戶友好的表單有諸多好處，好比：

• 更高的轉化率
• 更好的用戶體驗
• 更專業的品牌效果

就像其餘主要的框架同樣，有大量的社區解決方案可用於構建優雅的Vue表單。從簡單的文本輸入到高級的電話數字模版，都有不少可供選擇。

這裏是一些我經常使用到的Vue輸入庫。不過，這只是關於表單元素的一個清單，我也整理了一個Vue圖標庫的清單。

但願這些工具對你有幫助。

一、Vue Select

select標籤是表單常常用到的一個表單控件。若是你有使用過，應該知道自定義這個select標籤是很麻煩的。 幸運的是，Vue Select庫提供一種直觀的方式去添加這些功能，例如：

• 標記
• 搜索
• 過濾
• 支持Vuex 很是易用。

  

二、Vue Input標籤

Vue Input標籤庫可用在表單輸入添加標籤。例如：

三、Vue Dropdowns

Vue Dropdowns是另一個處理select標籤的庫。不只能夠建立流暢的輸入，並且提供更好的方式去設置數據以及提供事件監聽好比change和blur。

四、Vue Color

在表單添加顏色選擇器，用Vue Color是最簡單的一個方式。若是要從新去計劃及實施寫出來估計要好幾個小時。可是用Vue Color只須要幾分鐘的時間。

它具備幾種不一樣的樣式、事件鉤子以及支持不一樣的顏色格式。這個強烈推薦。

五、VueJS DatePicker

一個簡潔的日期選擇組件。

六、Vue Switches

一個精美的按鈕切換組件。

七、Vue Dropzone

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

八、Vue Circle Slider

一個圓形滑塊組件。

九、Vue Phone Number

一個電話號碼輸入組件，靈活且可定製化，包括：

• 驗證國家代碼
• 主題和顏色
• 電話號碼格式

  

後記

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

Links

原文連接 8 Free Vue Icon Libraries to Pretty Up Your Web App