| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text> |
| 3 | <VueDraggable | |
| 4 | :list="formData" | |
| 5 | :force-fallback="true" | |
| 6 | :animation="200" | |
| 7 | handle=".drag-icon" | |
| 8 | class="m-t-8px" | |
| 9 | item-key="index" | |
| 10 | > | |
| 11 | <template #item="{ element, index }"> | |
| 12 | <div | |
| 13 | class="mb-4px flex flex-col gap-4px border border-gray-2 border-rounded rounded border-solid p-8px" | |
| 14 | > | |
| 15 | <!-- 操作按钮区 --> | |
| 9259c2 | 16 | <div class="m--8px m-b-4px flex flex-row items-center justify-between p-8px" style="background-color: var(--app-content-bg-color);"> |
| 820397 | 17 | <el-tooltip content="拖动排序"> |
| 9259c2 | 18 | <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" style="color: #8a909c;" /> |
| 820397 | 19 | </el-tooltip> |
| H | 20 | <el-tooltip content="删除"> |
| 21 | <Icon | |
| 22 | icon="ep:delete" | |
| 23 | class="cursor-pointer text-red-5" | |
| 24 | v-if="formData.length > 1" | |
| 25 | @click="handleDelete(index)" | |
| 26 | /> | |
| 27 | </el-tooltip> | |
| 28 | </div> | |
| 29 | <!-- 内容区 --> | |
| 30 | <slot :element="element" :index="index"></slot> | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | </VueDraggable> | |
| 34 | <el-tooltip :disabled="limit < 1" :content="`最多添加${limit}个`"> | |
| 35 | <el-button | |
| 36 | type="primary" | |
| 37 | plain | |
| 38 | class="m-t-4px w-full" | |
| 39 | :disabled="limit > 0 && formData.length >= limit" | |
| 40 | @click="handleAdd" | |
| 41 | > | |
| 42 | <Icon icon="ep:plus" /><span>添加</span> | |
| 43 | </el-button> | |
| 44 | </el-tooltip> | |
| 45 | </template> | |
| 46 | ||
| 47 | <script setup lang="ts"> | |
| 48 | // 拖拽组件 | |
| 49 | import VueDraggable from 'vuedraggable' | |
| 50 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 51 | import { any, array } from 'vue-types' | |
| 52 | import { propTypes } from '@/utils/propTypes' | |
| 53 | import { cloneDeep } from 'lodash-es' | |
| 54 | ||
| 55 | // 拖拽组件封装 | |
| 56 | defineOptions({ name: 'Draggable' }) | |
| 57 | ||
| 58 | // 定义属性 | |
| 59 | const props = defineProps({ | |
| 60 | // 绑定值 | |
| 61 | modelValue: array<any>().isRequired, | |
| 62 | // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象 | |
| 63 | emptyItem: any<unknown>().def({}), | |
| 64 | // 数量限制：默认为0，表示不限制 | |
| 65 | limit: propTypes.number.def(0) | |
| 66 | }) | |
| 67 | // 定义事件 | |
| 68 | const emit = defineEmits(['update:modelValue']) | |
| 69 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 70 | ||
| 71 | // 处理添加 | |
| 72 | const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {})) | |
| 73 | // 处理删除 | |
| 74 | const handleDelete = (index: number) => formData.value.splice(index, 1) | |
| 75 | </script> | |
| 76 | ||
| 77 | <style scoped lang="scss"></style> | |
