Electron+Vue3+TypeScript+Vite +Vue.Draggable 完成事务拖动

原文地址：https://www.webxiu.com.cn/post/10005245

前言

[图片上传失败...(image-9665ed-1652694715737)]

有了简单的框架，下面来点实际业务相关的操作吧，集成 Vue.Draggable，将每一项任务拖拽任务到每个分类吧。

Vue.Draggable 已经提供了一些完美的示例，

[图片上传失败...(image-4cb1c4-1652694715737)]

这是 Vue.Draggable 官方提供的示例，https://sortablejs.github.io/vue.draggable.next/#/two-lists

是不是正是我们要的呢？

集成 Vue.Draggable

安装

npm install vue-draggable-next
//or
yarn add vue-draggable-next

为什么是vue-draggable-next？主要是官方的 Vue.Draggable 在我们现有的项目上有兼容问题，所以选择了它。当然不影响效果使用。

使用

新建compontents/group/group-list.vue，主要用来写每个分组拖拽控件的。

group="people"，主要是用来组与组直接可以相互拖动，如果不加是不可以的，只能组内排序。

transition-group，是用来组内拖动动画的。

components/c-main.vue中引入group-list.vue组件，并定义好每个分组的默认数据

import groupList from './group/group-list.vue'
let group = [{
  title: '待处理',
  todolist: [{
    title: '首页搜索样式bug',
    describe: ''
  }, {
    title: '同事管理搜索结果错误',
    describe: ''
  }, {
    title: '同事管理搜索没有结果时样式错误',
    describe: ''
  }]
}, {
  title: '处理中',
  todolist: [{
    title: '个人中心头像默认为微信头像',
    describe: ''
  }]
}, {
  title: '待发布',
  todolist: [{
    title: '全局默认图片替换',
    describe: ''
  }, {
    title: '购物车没有校验库存',
    describe: ''
  }]
}, {
  title: '已发布',
  todolist: []
}, {
  title: '已完成',
  todolist: []
}, {
  title: '待观察',
  todolist: []
}]

  

    

      
{{ item.title }}
      
    
  

[图片上传失败...(image-d40e64-1652694715737)]

功能好像没有实现，拖动无效

初步推测应该是事项数据是通过父组件传值进去导致的，子组件拖动后，父组件重新渲染了老数据，导致又初始化了数据。

我们先在子组件里面写死数据试试。

在 compontents/group/group-list.vue 中，去掉父组件传值的 todolist ，先在 data 里面定义好数据。

props: {
  // todolist: {
  //   type: [Array],
  //   default: () => []
  // },
},
data(){
  return {
    todolist: [{
      id: 1,
      title: '首页搜索样式bug',
      describe: ''
    }, {
      id: 2,
      title: '同事管理搜索结果错误',
      describe: ''
    }, {
      id: 3,
      title: '同事管理搜索没有结果时样式错误',
      describe: ''
    }]
  }
}

[图片上传失败...(image-b2246a-1652694715737)]

经过测试，发现ok，对于这个问题我们怎么解决呢？

我想的解决方案是，我们数据最终会通过接口，然后通过 vuex ，来渲染数据，这样我们每次拖动，直接修改 vuex，来解决父子组件之间的通讯。数据最终也会入库，所以拖动结果发生改变时，我们也将操作数据库。

结语

本章节就到这里了，下一章节，我们的数据将放入 vuex 状态树，解决上面的拖动问题，并且，完成个人事务处理，数据存放到 localStorage，然后打包一个可以使用的exe包，供个人使用。

本项目将持续更新，希望你也持续关注。

项目地址

• https://gitee.com/javanx/todolist
• https://gitee.com/javanx/todolist-server