refactor
This commit is contained in:
Pan
parent
052e52faa6
commit
2cc2af5a08
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-select v-model="selectVal" :v-bind="$attrs" multiple>
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
|
||||
<el-select v-model="selectVal" :v-bind="$attrs" class="drag-select" multiple>
|
||||
<slot/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,33 +13,18 @@ export default {
|
|||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectVal: {
|
||||
get() {
|
||||
console.log([...this.value])
|
||||
return [...this.value]
|
||||
},
|
||||
set() {
|
||||
|
||||
set(val) {
|
||||
this.$emit('input', [...val])
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
console.log(val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setSort()
|
||||
},
|
||||
|
|
@ -54,7 +39,6 @@ export default {
|
|||
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
||||
},
|
||||
onEnd: evt => {
|
||||
console.log(evt)
|
||||
const targetRow = this.value.splice(evt.oldIndex, 1)[0]
|
||||
this.value.splice(evt.newIndex, 0, targetRow)
|
||||
}
|
||||
|
|
@ -64,10 +48,14 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sortable-ghost{
|
||||
<style scoped>
|
||||
.drag-select >>> .sortable-ghost{
|
||||
opacity: .8;
|
||||
color: #fff!important;
|
||||
background: #42b983!important;
|
||||
}
|
||||
|
||||
.drag-select >>> .el-tag{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
// import Sortable from 'sortablejs'
|
||||
|
||||
// function setSort(el, binding) {
|
||||
// // import('sortablejs').then(excel => {
|
||||
|
||||
// // })
|
||||
// // import
|
||||
// const d = el.querySelectorAll('.el-select__tags > span')[0]
|
||||
// const sortable = Sortable.create(d, {
|
||||
// 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 => {
|
||||
// console.log(binding)
|
||||
// // console.log(evt)
|
||||
// // const targetRow = this.value.splice(evt.oldIndex, 1)[0]
|
||||
// // this.value.splice(evt.newIndex, 0, targetRow)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// export default{
|
||||
// bind(el, binding, vnode) {
|
||||
// console.log(binding)
|
||||
// setSort(el, binding)
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import drag from './drag'
|
||||
|
||||
const install = function(Vue) {
|
||||
Vue.directive('el-drag-select', drag)
|
||||
}
|
||||
|
||||
if (window.Vue) {
|
||||
window['el-drag-select'] = drag
|
||||
Vue.use(install); // eslint-disable-line
|
||||
}
|
||||
|
||||
drag.install = install
|
||||
export default drag
|
||||
|
|
@ -1,68 +1,43 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<el-select v-el-drag-select v-model="value" multiple placeholder="请选择">
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"/>
|
||||
</el-select>
|
||||
{{ value }}
|
||||
|
||||
<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 Sortable from 'sortablejs'
|
||||
import elDragSelect from '@/directive/el-dragSelect' // base on element-ui
|
||||
import ElDragSelect from '@/components/DragSelect' // base on element-ui
|
||||
|
||||
export default {
|
||||
name: 'DragSelectDemo',
|
||||
directives: { elDragSelect },
|
||||
components: { ElDragSelect },
|
||||
data() {
|
||||
return {
|
||||
value: ['黄金糕', '双皮奶'],
|
||||
value: ['Apple', 'Banana', 'Orange'],
|
||||
options: [{
|
||||
value: '黄金糕',
|
||||
label: '黄金糕'
|
||||
value: 'Apple',
|
||||
label: 'Apple'
|
||||
}, {
|
||||
value: '双皮奶',
|
||||
label: '双皮奶'
|
||||
value: 'Banana',
|
||||
label: 'Banana'
|
||||
}, {
|
||||
value: '蚵仔煎',
|
||||
label: '蚵仔煎'
|
||||
value: 'Orange',
|
||||
label: 'Orange'
|
||||
}, {
|
||||
value: '龙须面',
|
||||
label: '龙须面'
|
||||
value: 'Pear',
|
||||
label: 'Pear'
|
||||
}, {
|
||||
value: '北京烤鸭',
|
||||
label: '北京烤鸭'
|
||||
value: 'Strawberry',
|
||||
label: 'Strawberry'
|
||||
}]
|
||||
}
|
||||
},
|
||||
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 => {
|
||||
// console.log(evt)
|
||||
const targetRow = this.value.splice(evt.oldIndex, 1)[0]
|
||||
this.value.splice(evt.newIndex, 0, targetRow)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sortable-ghost{
|
||||
opacity: .8;
|
||||
color: #fff!important;
|
||||
background: #42b983!important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue