vue怎么把内容拖拽到下拉框内

需要有一个可拖拽的div元素。

1、该div元素应设置draggable=true属性来标识该元素可拖拽。

2、为该div元素添加一个v-on：dragstart监听事件，该事件函数接收一个event参数。

3、其中包含所拖动的div元素和其他数据，该事件函数可以用来获取拖拽的元素的信息，并将其存入dataTransfer对象中，以便在放置时提取这些数据。

4、为要放置的元素添加一个v-on：drop监听事件，该事件函数会接收一个event参数，在该事件中，可使用dataTransfer.getData()方法取出之前传入的数据。

5、将该数据写入下拉框中即可完成拖拽到下拉框的功能。

把后台传来的list，赋值给cityList。

把后台传来的list，赋值给cityList，就可以放到下拉菜单中。如果字段名字不一致需要循环转一下或者让后台改字段名字。

vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。

本人学生 , 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用 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

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

---