基于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组件库的源码看看.
推荐阅读：
