vue3 实现 select 下拉选项

Posted 2023-03-09

参考技术A

本人学生 , 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用 Vue2.x 的版本做项目, 暑假刚刚学习了 Vue3 想着新项目就直接用 Vue3 上手.

好了, 话不多说先给大佬们看看效果样式:

因为下拉框可能会在某些情况下被挡住, 所以这里的下拉框被挂载到了 body 标签上, 并且下拉框中的选项往往是以 <slot> 插槽的形式编写, 这里就会困扰到很多小白, 搞不明白怎么样才能在 下拉框 与 触发下拉按钮 之间关联响应式事件与数据.

tk-select 为 select 下选项父标签, 必须含有插槽 #selectDropDown 才能正常使用

tk-select-item 为**select
**下选项子标签(选项标签), tk-select-item 内可以继续写入其他 html 内容, 每项的具体值由props value 决定

可以使用 v-modal 实时获取到 下拉选项 选取到的值

首先看看目录结构

两个 .vue 文件用来的干嘛的没什么好说的, selectBus.js 解决 Vue3 中无法安装 eventBus 的问题, token.js 用于给每组 selec t 与 select-item 相互绑定.

我们先看看 vue3 官网怎么说的 进入官网 . 说人话的意思就是不可以像 vue2 那样愉快的安装 Bus , 需要 自己实现事件接口 或者使用 第三方插件 . 这里官网也给出了具体实现方案.

vue3 新增 <teleport> 标签, 可以将标签内的元素挂载到任意位置, 查看官方文档

select 主要有触发下拉按钮 tk-select-button 和下拉列表 tk-select-dropdown 组成, 下拉框中的选项未来将由插槽插入.

首先解决下拉列表打开&关闭和定位的问题

在 select.vue 中接收事件

到这里下拉选项框基本就完成了. 我们像页面添加第一个下拉选项时非常完美,但是如果页面上有两个 select 存在时问题来了. 我们发现当控制其中一个选项被选中是, 另外一个 select 显示的值也随之改变. 我们需要将一组 select & select-item 进行绑定,让 Bus 在接受时知道事件来自于哪个里面的 select-item .

在 vue2 中我们通常获取实例的 parent 然后一层一层寻找父类 select , 但是在 vue3 setup 中并不能获取到正确的 parent , 所以我想到了可以在 select 创建时派发一个 token 在讲此令牌传给所有子类, 好了理论存在, 开始实践.

在vue中使用 provide 可以向子类、孙类等等后代传输数据, 后代使用 inject 接收数据. 查看官网

这里可以模仿Java中的UUID

在 select 创建时生成 token 并派发给后代

这样我们在子类接收后每次使用 bus 发送数据时带上 token

在 select.vue 监听Bus后先验证token

github.com/18651440358/vue3-select

第一次写帖子几分激动几分不知所措, 请各位大佬指点错误或可以优化的地方, 欢迎大家讨论.