/
githubmirror
/
vue-element-admin
Обзор
Документация
Войти
/
githubmirror
/
vue-element-admin
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/DragSelect/index.vue
65 строк
1 KB
花裤衩
perf: change >>> ::v-deep
08 июн 2020, 15:42
08 июн 2020, 15:42
c5abe75
Код
Авторство
О чём код?
<template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <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 = this.$refs.dragSelect.$el.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 lang="scss" scoped> .drag-select { ::v-deep { .sortable-ghost { opacity: .8; color: #fff !important; background: #42b983 !important; } .el-tag { cursor: pointer; } } } </style>