原文地址：https://www.webxiu.com.cn/post/10005245
前言
[圖片上傳失敗...(image-9665ed-1652694715737)]
有了簡(jiǎn)單的框架，下面來點(diǎn)實(shí)際業(yè)務(wù)相關(guān)的操作吧，集成 Vue.Draggable，將每一項(xiàng)任務(wù)拖拽任務(wù)到每個(gè)分類吧。
Vue.Draggable 已經(jīng)提供了一些完美的示例，
[圖片上傳失敗...(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 在我們現(xiàn)有的項(xiàng)目上有兼容問題，所以選擇了它。當(dāng)然不影響效果使用。
使用
新建compontents/group/group-list.vue，主要用來寫每個(gè)分組拖拽控件的。
<template>
<draggable class="list-group"
:list="todolist"
:move="onMoveCallback"
v-bind="dragOptions"
@change="log"
@start="isDragging = true"
@end="isDragging = false"
group="people">
<transition-group type="transition" name="flip-list">
<div
class="list-group-item"
v-for="element in todolist"
:key="element.id"
>
{{ element.title }}
</div>
</transition-group>
</draggable>
</template>
<script>
import { VueDraggableNext } from 'vue-draggable-next'
export default {
components: {
draggable: VueDraggableNext
},
props: {
todolist: {
type: [Array],
default: () => []
},
},
computed: {
dragOptions() { // 拖拽動(dòng)畫效果
return {
animation: 0,
group: 'description',
disabled: false,
ghostClass: 'ghost',
}
},
},
data(){
return {
}
},
methods: {
log: function(evt) {
window.console.log(evt);
},
onMoveCallback (evt, originalEvent) {
console.log(evt)
// this.currentTask = evt.draggedContext.element
// this.current = +evt.to.dataset.index
}
}
}
</script>
<style lang="scss">
.list-group{
height: calc(100% - 30px);
padding: 0 10px;
overflow-y: auto;
}
// 拖拽動(dòng)畫效果
.flip-list-move {
transition: transform 0.5s;
}
.no-move {
transition: transform 0s;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>
group="people"，主要是用來組與組直接可以相互拖動(dòng)，如果不加是不可以的，只能組內(nèi)排序。
transition-group，是用來組內(nèi)拖動(dòng)動(dòng)畫的。
components/c-main.vue中引入group-list.vue組件，并定義好每個(gè)分組的默認(rèn)數(shù)據(jù)
import groupList from './group/group-list.vue'
let group = [{
title: '待處理',
todolist: [{
title: '首頁(yè)搜索樣式bug',
describe: ''
}, {
title: '同事管理搜索結(jié)果錯(cuò)誤',
describe: ''
}, {
title: '同事管理搜索沒有結(jié)果時(shí)樣式錯(cuò)誤',
describe: ''
}]
}, {
title: '處理中',
todolist: [{
title: '個(gè)人中心頭像默認(rèn)為微信頭像',
describe: ''
}]
}, {
title: '待發(fā)布',
todolist: [{
title: '全局默認(rèn)圖片替換',
describe: ''
}, {
title: '購(gòu)物車沒有校驗(yàn)庫(kù)存',
describe: ''
}]
}, {
title: '已發(fā)布',
todolist: []
}, {
title: '已完成',
todolist: []
}, {
title: '待觀察',
todolist: []
}]
<div class="main">
<div class="main-group">
<div class="group" v-for="(item, index) in group" :key="index">
<div class="group-title">{{ item.title }}</div>
<group-list :todolist="item.todolist"></group-list>
</div>
</div>
</div>
[圖片上傳失敗...(image-d40e64-1652694715737)]
功能好像沒有實(shí)現(xiàn)，拖動(dòng)無效
初步推測(cè)應(yīng)該是事項(xiàng)數(shù)據(jù)是通過父組件傳值進(jìn)去導(dǎo)致的，子組件拖動(dòng)后，父組件重新渲染了老數(shù)據(jù)，導(dǎo)致又初始化了數(shù)據(jù)。
我們先在子組件里面寫死數(shù)據(jù)試試。
在 compontents/group/group-list.vue 中，去掉父組件傳值的 todolist ，先在 data 里面定義好數(shù)據(jù)。
props: {
// todolist: {
// type: [Array],
// default: () => []
// },
},
data(){
return {
todolist: [{
id: 1,
title: '首頁(yè)搜索樣式bug',
describe: ''
}, {
id: 2,
title: '同事管理搜索結(jié)果錯(cuò)誤',
describe: ''
}, {
id: 3,
title: '同事管理搜索沒有結(jié)果時(shí)樣式錯(cuò)誤',
describe: ''
}]
}
}
[圖片上傳失敗...(image-b2246a-1652694715737)]
經(jīng)過測(cè)試，發(fā)現(xiàn)ok，對(duì)于這個(gè)問題我們?cè)趺唇鉀Q呢？
我想的解決方案是，我們數(shù)據(jù)最終會(huì)通過接口，然后通過 vuex ，來渲染數(shù)據(jù)，這樣我們每次拖動(dòng)，直接修改 vuex，來解決父子組件之間的通訊。數(shù)據(jù)最終也會(huì)入庫(kù)，所以拖動(dòng)結(jié)果發(fā)生改變時(shí)，我們也將操作數(shù)據(jù)庫(kù)。
結(jié)語
本章節(jié)就到這里了，下一章節(jié)，我們的數(shù)據(jù)將放入 vuex 狀態(tài)樹，解決上面的拖動(dòng)問題，并且，完成個(gè)人事務(wù)處理，數(shù)據(jù)存放到 localStorage，然后打包一個(gè)可以使用的exe包，供個(gè)人使用。
本項(xiàng)目將持續(xù)更新，希望你也持續(xù)關(guān)注。
