基於vue開發的後台管理系統，怎麼封裝一個下拉選擇框組件?
裡面有搜索框，每條數據展示，以及分頁
一個下拉組件，最難的部分就是dropdown的實現。
一個dropdown組件沒這麼容易實現的，看過element的實現，也是引用 popper.js來處理。
難度在於考慮你這個組件放在的div是否被定位了，並且 overflow: hidden 了。所以，dropdown 出來的部分，是要append到body里的；而這部分定位又要放到dropdwon組件對應的位置，還要考慮縮放窗口位置的改變來更新。
所以，首要目標先實現dropdown組件才是關鍵。
搜索，分頁這些都是很次要的。
圖省事可以找現成的組件
自己做的話，其實也就那樣，定義組件和props，加好slot，外部傳特定的內容進來就行，展示的話獲取個當前組件的位置然後搞一層div蓋在頁面上層就行
這個問題是在問怎麼封裝一個業務組件的問題，所以直接丟一個框架或者丟一個GitHub鏈接，肯定是一個不負責任的行為，但是，我還是肯定這個回答的。
GitHub上找找業內成熟UI組件庫的源碼看看.
問如何封裝一個選擇框組件這樣一個具體的業務組件，而且列舉的幾個具體的需求，裡面有搜索框，每條數據展示，以及分頁。
那麼大概畫出來的原型應該是下面這樣的。
有了這個圖，然後我們可參考 一個成熟框架的下拉組件的使用方式應該是這樣的。
&
&
data(){
return {
value:」」
}
},
methods:{
change(){
},
async search(query,page,cb){
let list = await this.$api.search({query,page});
cb(list);
}
}
有了這個再寫組件 可能就會簡單很多。
UI 就不寫了，這個組件父級傳入 value,然後emit三個方法 input、search、change 出去。
所以，我其實回答了一個封裝組件的通用方法：
1、整理需求、畫出原型。
2、是如何使用這個組件。
3、通過使用的方式整理出輸入和輸出。
4、書寫組件的內部邏輯。
大概只能幫你到這兒了，因為我如果給你一個 demo、下一次可能還會遇到如何封裝一個地區選擇、如何封裝一個卡號輸入等等一系列問題。
所以還是可以看看 GitHub上開源的組件庫，然後參考著去寫自己的組件。
用elm加自定義指令
v-selectpage 應該就是你說的組件
https://github.com/TerryZ/v-selectpage?github.comGitHub上找找業內成熟UI組件庫的源碼看看.
推薦閱讀：
