feature: add drag select component (#1249)

This commit is contained in:
花裤衩 2018-10-24 16:06:24 +08:00 committed by Pan
parent f79d0febb1
commit c042dc8de3
8 changed files with 115 additions and 0 deletions

View File

@ -118,6 +118,7 @@ Understanding and learning this knowledge in advance will greatly help the use o
- Avatar Upload
- Back To Top
- Drag Dialog
- Drag Select
- Drag Kanban
- Drag List
- SplitPane

View File

@ -130,6 +130,7 @@
- 头像上传
- 返回顶部
- 拖拽Dialog
- 拖拽Select
- 拖拽看板
- 列表拖拽
- SplitPane

View File

@ -0,0 +1,61 @@
<template>
<el-select v-model="selectVal" v-bind="$attrs" class="drag-select" multiple>
<slot/>
</el-select>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'DragSelect',
props: {
value: {
type: Array,
required: true
}
},
computed: {
selectVal: {
get() {
return [...this.value]
},
set(val) {
this.$emit('input', [...val])
}
}
},
mounted() {
this.setSort()
},
methods: {
setSort() {
const el = document.querySelectorAll('.el-select__tags > span')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
},
onEnd: evt => {
const targetRow = this.value.splice(evt.oldIndex, 1)[0]
this.value.splice(evt.newIndex, 0, targetRow)
}
})
}
}
}
</script>
<style scoped>
.drag-select >>> .sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
.drag-select >>> .el-tag{
cursor: pointer;
}
</style>

View File

@ -22,6 +22,7 @@ export default {
componentMixin: 'Mixin',
backToTop: 'BackToTop',
dragDialog: 'Drag Dialog',
dragSelect: 'Drag Select',
dragKanban: 'Drag Kanban',
charts: 'Charts',
keyboardChart: 'Keyboard Chart',

View File

@ -22,6 +22,7 @@ export default {
componentMixin: 'Mixin',
backToTop: 'Ir arriba',
dragDialog: 'Drag Dialog',
dragSelect: 'Drag Select',
dragKanban: 'Drag Kanban',
charts: 'Gráficos',
keyboardChart: 'Keyboard Chart',

View File

@ -22,6 +22,7 @@ export default {
componentMixin: '小组件',
backToTop: '返回顶部',
dragDialog: '拖拽 Dialog',
dragSelect: '拖拽 Select',
dragKanban: '可拖拽看板',
charts: '图表',
keyboardChart: '键盘图表',

View File

@ -78,6 +78,12 @@ const componentsRouter = {
name: 'DragDialogDemo',
meta: { title: 'dragDialog' }
},
{
path: 'drag-select',
component: () => import('@/views/components-demo/dragSelect'),
name: 'DragSelectDemo',
meta: { title: 'dragSelect' }
},
{
path: 'dnd-list',
component: () => import('@/views/components-demo/dndList'),

View File

@ -0,0 +1,43 @@
<template>
<div class="components-container">
<el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
<el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
</el-drag-select>
<div style="margin-top:30px;">
<el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
</div>
</div>
</template>
<script>
import ElDragSelect from '@/components/DragSelect' // base on element-ui
export default {
name: 'DragSelectDemo',
components: { ElDragSelect },
data() {
return {
value: ['Apple', 'Banana', 'Orange'],
options: [{
value: 'Apple',
label: 'Apple'
}, {
value: 'Banana',
label: 'Banana'
}, {
value: 'Orange',
label: 'Orange'
}, {
value: 'Pear',
label: 'Pear'
}, {
value: 'Strawberry',
label: 'Strawberry'
}]
}
}
}
</script>