Skip to content

Commit 543a992

Browse files
yugasunPanJiaChen
yugasun
authored and
PanJiaChen
committed
feat: add draggable kanban using vue-draggable (PanJiaChen#625)
1 parent 8f37950 commit 543a992

File tree

6 files changed

+162
-2
lines changed

6 files changed

+162
-2
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"vue-multiselect": "2.0.8",
3838
"vue-router": "3.0.1",
3939
"vue-splitpane": "1.0.2",
40-
"vuedraggable": "2.15.0",
40+
"vuedraggable": "^2.16.0",
4141
"vuex": "3.0.1",
4242
"xlsx": "^0.11.16"
4343
},

‎src/components/Kanban/index.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div class="board-column">
3+
<div class="board-column-header">
4+
{{headerText}}
5+
</div>
6+
<draggable
7+
class="board-column-content"
8+
:list="list"
9+
:options="options">
10+
<div class="board-item" v-for="element in list" :key="element.id">
11+
{{element.name}} {{element.id}}
12+
</div>
13+
</draggable>
14+
</div>
15+
</template>
16+
<script>
17+
import draggable from 'vuedraggable'
18+
19+
export default {
20+
name: 'dragKanban-demo',
21+
components: {
22+
draggable
23+
},
24+
props: {
25+
headerText: {
26+
type: String,
27+
default: 'Header'
28+
},
29+
options: {
30+
type: Object,
31+
default() {
32+
return {}
33+
}
34+
},
35+
list: {
36+
type: Array,
37+
default() {
38+
return []
39+
}
40+
}
41+
}
42+
}
43+
</script>
44+
<style lang="scss">
45+
.board-column {
46+
min-width: 300px;
47+
min-height: 100px;
48+
height: auto;
49+
overflow: hidden;
50+
background: #f0f0f0;
51+
border-radius: 3px;
52+
53+
.board-column-header {
54+
height: 50px;
55+
line-height: 50px;
56+
overflow: hidden;
57+
padding: 0 20px;
58+
text-align: center;
59+
background: #333;
60+
color: #fff;
61+
border-radius: 3px 3px 0 0;
62+
}
63+
64+
.board-column-content {
65+
height: auto;
66+
overflow: hidden;
67+
border: 10px solid transparent;
68+
min-height: 60px;
69+
display: flex;
70+
justify-content: flex-start;
71+
flex-direction: column;
72+
align-items: center;
73+
74+
.board-item {
75+
cursor: pointer;
76+
width: 100%;
77+
height: 64px;
78+
margin: 5px 0;
79+
background-color: #fff;
80+
text-align: left;
81+
line-height: 54px;
82+
padding: 5px 10px;
83+
box-sizing: border-box;
84+
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
85+
}
86+
}
87+
}
88+
</style>
89+

‎src/lang/en.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
componentMixin: 'Mixin',
2020
backToTop: 'BackToTop',
2121
dragDialog: 'Drag Dialog',
22+
dragKanban: 'Drag Kanban',
2223
charts: 'Charts',
2324
keyboardChart: 'Keyboard Chart',
2425
lineChart: 'Line Chart',

‎src/lang/zh.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
componentMixin: '小组件',
2020
backToTop: '返回顶部',
2121
dragDialog: '拖拽 Dialog',
22+
dragKanban: '可拖拽看板',
2223
charts: '图表',
2324
keyboardChart: '键盘图表',
2425
lineChart: '折线图',

‎src/router/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@ export const asyncRouterMap = [
112112
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
113113
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
114114
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
115-
{ path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }}
115+
{ path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
116+
{ path: 'drag-kanban', component: _import('components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
116117
]
117118
},
118119

‎src/views/components-demo/dragKanban.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="components-container board">
3+
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
4+
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
5+
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
6+
</div>
7+
</template>
8+
<script>
9+
import Kanban from '@/components/Kanban'
10+
11+
export default {
12+
name: 'dragKanban-demo',
13+
components: {
14+
Kanban
15+
},
16+
data() {
17+
return {
18+
options: {
19+
group: 'mission'
20+
},
21+
list1: [
22+
{ name: 'Mission', id: 1 },
23+
{ name: 'Mission', id: 2 },
24+
{ name: 'Mission', id: 3 },
25+
{ name: 'Mission', id: 4 }
26+
],
27+
list2: [
28+
{ name: 'Mission', id: 5 },
29+
{ name: 'Mission', id: 6 },
30+
{ name: 'Mission', id: 7 }
31+
],
32+
list3: [
33+
{ name: 'Mission', id: 8 },
34+
{ name: 'Mission', id: 9 },
35+
{ name: 'Mission', id: 10 }
36+
]
37+
}
38+
}
39+
}
40+
</script>
41+
<style lang="scss">
42+
.board {
43+
width: 1000px;
44+
margin-left: 20px;
45+
display: flex;
46+
justify-content: space-around;
47+
flex-direction: row;
48+
align-items: flex-start;
49+
}
50+
.kanban {
51+
&.todo {
52+
.board-column-header {
53+
background: #4A9FF9;
54+
}
55+
}
56+
&.working {
57+
.board-column-header {
58+
background: #f9944a;
59+
}
60+
}
61+
&.done {
62+
.board-column-header {
63+
background: #2ac06d;
64+
}
65+
}
66+
}
67+
</style>
68+

0 commit comments

Comments
 (0)