我們在開發項目時候經常會遇到這樣的需求，提供一個可選擇的下拉框，下拉列表中提供了常見的選項。當所提供選項選項無法滿足用戶需求時用戶可以自行輸入所需參數。為了滿足大部分的用戶需求我們可以封裝一個通用組件來滿足多種需求，當調用的組件的時候配置好參數就可以快速實現所需功能了。

圖來自“互聯網”

​組件實現的功能：

1，可定義組件寬度，下拉寬度與組件寬度一致；類型number，默認值100；

2，可定義後綴，默認為空；

3，可定義是否只讀，默認為false；

4，可定義下拉列表選項，類型數組，默認為空；

5，可定義輸入框中值顯示位置，分別為居左、居中、居右；分隊對應的可輸入值為left、center、right，默認居中即center。

6，可定義下拉按鈕顯示，類型布爾值，默認為true（顯示）。

定義模板

這裡利用了element中的popover彈出框組件中嵌套下拉列表來實現下拉選項，當選擇下拉選項中的值時將該值賦值給input框中的綁定值。而input框主要使用了些動態樣式並監聽了鼠標獲取焦點、鍵盤輸入、鍵盤刪除、鼠標失去焦點等觸發事件 ，來實時改變輸入框中顯示的值。

定義CSS樣式

這裡我用的是scss預處理器，在修改popover組件樣式時我們用到了深度作用選擇器::v-deep，具體的可以參考文章 ，這裡需要注意的是控制彈出框與input框的寬度一致，在popover組件上添加一個樣式獲取上級組件的寬度以達到控制彈出窗父級組件的寬度，這樣popover中就可以獲取到父級組件的寬度，再通過深度作用選擇器來定位組件中的DOM元素並進行修改即可。

定義功能邏輯

props中是留給用戶調用組件時配置的參數值，前面文章 中有提到過

組件調用

組件中只有下拉列表必須提供數據的，其他參數都定義了默認值所以可選填。這樣用戶就可以非常靈活的使用該組件了，也大大提高了組件的可使用範圍。這裡沒看到組件引入是因為我對組件進行了全局自動化註冊，可以參考文章 。

總結：

以上內容是小編給大家分享的Vue實戰073：可輸入的下拉框組件功能實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！

閱讀更多 編程手札 的文章

關鍵字: 默認 組件 文章