99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
|
<section>
|
|
<draggable v-model="value" :item-key="itemKey" animation="200" :group="group" handle=".item-rank">
|
|
<template #item="{ element, index }">
|
|
<div class="draggable-item">
|
|
<div class="item-content">
|
|
<el-icon size="50" class="item-rank">
|
|
<component :is="'pi-icon-move-area'"/>
|
|
</el-icon>
|
|
<div class="item-value">
|
|
<slot v-bind="{ element, index }"></slot>
|
|
</div>
|
|
</div>
|
|
<el-icon v-if="showDel" size="28" class="item-close" @click="remove(index)">
|
|
<component :is="'el-icon-CircleCloseFilled'"/>
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
<div v-if="showAdd" class="add">
|
|
<el-link :underline="false" type="primary" icon="el-icon-circle-plus" @click="add">添加规则</el-link>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import draggable from 'vuedraggable'
|
|
import {computed} from "vue";
|
|
|
|
defineOptions({
|
|
name: "piDraggable"
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const props = defineProps({
|
|
modelValue: {type: Array},
|
|
group: {type: Object},
|
|
itemKey: {type: String, default: "index"},
|
|
showAdd: {type: Boolean, default: true},
|
|
showDel: {type: Boolean, default: true},
|
|
template: {type: Object, default: {}}
|
|
})
|
|
|
|
const value = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
}
|
|
})
|
|
|
|
function remove(element, index) {
|
|
value.value.splice(index, 1)
|
|
}
|
|
|
|
function add() {
|
|
value.value.push(JSON.parse(JSON.stringify(props.template)))
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.draggable-item {
|
|
margin: 0 10px 15px 0;
|
|
position: relative;
|
|
|
|
.item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
border: 1px solid #eeeeee;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.item-rank {
|
|
cursor: move;
|
|
color: #9E9E9E;
|
|
width: 50px;
|
|
}
|
|
|
|
.item-value {
|
|
flex: 1;
|
|
}
|
|
|
|
.item-close {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
color: #9E9E9E;
|
|
top: -14px;
|
|
right: -12px;
|
|
}
|
|
}
|
|
|
|
.add {
|
|
padding: 0 10px 10px 20px;
|
|
text-align: center;
|
|
}
|
|
</style>
|