拖动组件 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>
相关推荐
不爱说话郭德纲14 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手14 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一14 小时前
别乱封装,你看出事儿了吧...
前端·vue.js
gongzemin15 小时前
Vue 项目权限管理 路由 按钮权限
前端·vue.js
Flame_15 小时前
一行代码搞定Vue3异步请求:vue3-request让状态管理从地狱到天堂
vue.js
FAIRY_STARS15 小时前
VUE3大屏自适应布局
vue.js
GISBox16 小时前
GIS新手入门首选!GISBox中文界面+一键安装,零依赖轻松搞定三维数据发布
vue.js·json·gis
FliPPeDround16 小时前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
做你的猫17 小时前
深入剖析:基于Vue 3与Three.js的3D知识图谱实现与优化
前端·javascript·vue.js
做你的猫17 小时前
深入剖析:基于Vue 3的高性能AI聊天组件设计与实现
前端·javascript·vue.js