拖动组件 vue-draggable-next 跨组件和clone问题

跨组件交互问题

问题描述:

当A,B组件 把 VueDraggableNext 都封装到其内部的时候,让A,B组件可以交互,比如把A中的数据元素拖动到B组件中,但是如果按照 每个组件都分别引用 VueDraggableNext 那么 A,B 组件之间分辨是两个实例,他们之间变不能交互。

解决方案:

VueDraggableNext 组件作为一个全局引用,A,B组件共同应用这个组件的,那么就是一个组件实例。

在vue3 中

ts 复制代码
//main.ts

import { VueDraggableNext } from 'vue-draggable-next'

const app = createApp(App)
app.provide('VueDraggableNext', VueDraggableNext)
ts 复制代码
// A组件
const VueDraggableNext = inject('VueDraggableNext')
ts 复制代码
// B组件
const VueDraggableNext = inject('VueDraggableNext')

这样就可以两个组件之间进行交互。

clone模式问题

问题描述

list 中的数据是个多层嵌套的对象,每次把list中的对象拖动新的组件数组中,并没有clone对象,而是引用原对象,不然拖拽第二个组件将会和第一个组件一模一样,改变第一个组件第二个、第三个也会跟着变动。解决方案是使用clone属性函数中拦截clone数据,让其创建新对象。

TS 复制代码
<template>
  <VueDraggableNext  
    :group="{ name:'ComponentList', pull:'clone', put:true }"
    :list="list"
    :force-fallback="true"
    :fallback-class="true"
    :fallback-on-body="false"
    item-key="id"
    @clone='cloneA' // 这里获取的是个原生对象相关的
    // 这里是获取的list中的某一项,拦截处理数据后会被拖动到另一个List
     :clone="(el:any) => { 
      const  clone = deepClone(el)
      return  clone
     }"
     :animation="500"
     >
     <div v-for="(item,index) in list" :key="index"></div>
   </VueDraggableNext>
</template>
相关推荐
前端开发爱好者27 分钟前
首个「完整级」WebSocket 调试神器来了!
前端·javascript·vue.js
黑幕困兽1 小时前
vue 项目给输入框增加trim()方法
vue.js
龙国浪子2 小时前
从零构建桌面写作软件的书籍管理系统:Electron + Vue 3 实战指南
vue.js·electron
王者鳜錸2 小时前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-文章详情、评论、点赞
前端·vue.js·spring boot
一大树2 小时前
Vue 3 中 `ref` 的“浅监听”行为解析:是误解还是真相?
前端·vue.js
海天胜景2 小时前
vue3 el-select 加载内容后 触发事件
前端·javascript·vue.js
掘金013 小时前
Vue3+Element Plus实现动态条件字段联动校验
前端·vue.js·前端框架
蓝爱人3 小时前
vue3接收SSE流数据进行实时渲染日志
前端·javascript·vue.js
梦鱼3 小时前
🔥 用 Vue2 + PDF.js 手撸一个「PDF 连续预览器」,自适应屏幕、支持缩放,直接拿来用!
前端·javascript·vue.js