vue 树形图,vue递归树形结构
本文主要介绍vue实现可拖动的树形结构图，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
vue递归组件拖动事件最近，vue做了一个小项目——可拖动的树形结构图。
Vue递归组件
由结构Vue的递归组件实现
使用layout flex，结构行由CSS伪类实现。
要注意居中布局。当X轴上的元素过多时，子元素的宽度会超出视图。元素居中后，虽然有滚动条，但只能到达右边的内容，左边的内容将无法访问。可以将父元素设置为inline-flex，将宽度设置为auto。当然如果是上面的结构就不会有这个问题了，但是大数据渲染还是困扰了我一下午。
drag事件
首先，将draggable属性绑定到需要拖动的元素。除了A和img标签默认设置为true，其他所有元素都需要设置。
然后是三个事件，dragend，dragover和drop(用Vue写的，所以不要在事件前添加)
注意dragover需要去掉默认行为，给事件赋予$event.preventDefault()，否则鼠标拖动时会被标记，使拖动无效。
拖动的元素需要使用$ event . data transfer . setdata( node ，transnodedata)将值传输到放置位置。
Node 是一个相当于传递数据的变量名，首先需要JSON.stringify()。
方法：{
dragstart(e，nodeObj){
Console.log(拖动移动的点，nodeObj.name，)；
transdata=json . stringify(node obj)//先把传过来的数据拖成JSON格式。
e.dataTransfer.setData(node ，transData)
},
dragover(e)
预防默认()
},
drop(e，nodeObj){
Console.log (point dropped to ，node obj . name)；
let get data=JSON . parse(e . data transfer . get data( node ))
console . log( get data ，get data)；
}
}
了解了这一点，接下来要做的就是将获取的拖动点数据放入拖放点的子数组中，并在dragend事件中删除父节点的子数组中的拖动点。触发dragstart事件时获取节点的索引，通过eventBus的组件通信方式传递给dragend(也可以使用Vuex)。
创建一个总线文件夹，并创建一个新的index.js文件。
从“vue”导入Vue
const busEvent=new Vue({
data(){
返回{
DragNodeIndex:-1，//拖动父节点的子数组中节点的索引
}
},
已创建(){
这个。$on (TransdragNodeIndex ，RES={//要通过$on监控$emit，需要确保自定义事件在被触发之前被监控，即订阅先于发布，否则无法监控数据。没怎么用过eventBus，很坑。
this.dragNodeIndex=res
})
}
})
导出默认业务事件
将eventBus引入组件。此时，在dragstart中的$emit触发自定义事件后，$on就可以接收这些数据了。在dragend中，这个索引可以通过eventBus获取，然后在数组中删除。
接下来就是做一些逻辑判断了。例如，父节点不能拖到子节点。首先，通过递归将父节点上所有子节点的名称遍历到一个数组中。如果放置位置的名称在数组中，则意味着父级已经到达子级。设置状态为真。
Ifferdragtoson (dragobj，drop obj){//确定父节点是否已移动到子节点。
if (dragObj.children.length===0)返回false
设new arr=[]；
函数getAllName(dragObj) {
newArr.push(.drag obj . children)；
if(drag obj . children . length===0){
返回；
}否则{
for(设I=0；I drag obj . children . length；i ) {
getAllName(drag obj . children[I])；
}
}
}
getAllName(drag obj)；
if (newArr.includes(dropObj)) {
返回true
}
返回false
}
让dragend事件通过eventBus获取状态，如果为真则直接返回。
不能拖到自己身上，退了就好。在扛锅的点下面专门加了一个子节点，主要是验证是通过栈中节点的地址来判断，而不是通过name属性来判断。
还有一个就是要提到拖拽事件中的$event.dataTransfer.dropEffect。可以获得的值有移动、复制、无和链接。下图中，当dropEffect为时，拖动点消失，实际上意味着拖动事件中的代码被执行，而drop事件中的代码没有被执行，所以需要先控制这一步。另外，不同浏览器的默认dropEffect也不一样，比如360浏览器。
代码连接
以上是vue实现可拖动树形结构图的细节。更多关于vue实现树形结构图的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。