From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/Draggable/index.vue | 86 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 86 insertions(+), 0 deletions(-)
diff --git a/src/components/Draggable/index.vue b/src/components/Draggable/index.vue
new file mode 100644
index 0000000..ae7d37b
--- /dev/null
+++ b/src/components/Draggable/index.vue
@@ -0,0 +1,86 @@
+<template>
+ <el-text type="info" size="small"> 鎷栧姩宸︿笂瑙掔殑灏忓渾鐐瑰彲瀵瑰叾鎺掑簭 </el-text>
+ <VueDraggable
+ :list="formData"
+ :force-fallback="false"
+ :animation="200"
+ handle=".drag-icon"
+ class="m-t-8px"
+ item-key="index"
+ >
+ <template #item="{ element, index }">
+ <div
+ class="mb-4px flex flex-col gap-4px border border-gray-2 border-rounded rounded border-solid p-8px"
+ >
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <div
+ class="m--8px m-b-4px flex flex-row items-center justify-between p-8px"
+ style="background-color: var(--app-content-bg-color)"
+ >
+ <el-tooltip content="鎷栧姩鎺掑簭">
+ <Icon
+ icon="ic:round-drag-indicator"
+ class="drag-icon cursor-move"
+ style="color: #8a909c"
+ />
+ </el-tooltip>
+ <el-tooltip content="鍒犻櫎">
+ <Icon
+ icon="ep:delete"
+ class="cursor-pointer text-red-5"
+ v-if="formData.length > min"
+ @click="handleDelete(index)"
+ />
+ </el-tooltip>
+ </div>
+ <!-- 鍐呭鍖� -->
+ <slot :element="element" :index="index"></slot>
+ </div>
+ </template>
+ </VueDraggable>
+ <el-tooltip :disabled="limit < 1" :content="`鏈�澶氭坊鍔�${limit}涓猔">
+ <el-button
+ type="primary"
+ plain
+ class="m-t-4px w-full"
+ :disabled="limit > 0 && formData.length >= limit"
+ @click="handleAdd"
+ >
+ <Icon icon="ep:plus" /><span>娣诲姞</span>
+ </el-button>
+ </el-tooltip>
+</template>
+
+<script setup lang="ts">
+// 鎷栨嫿缁勪欢
+import VueDraggable from 'vuedraggable'
+import { useVModel } from '@vueuse/core'
+import { any, array } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
+import { cloneDeep } from 'lodash-es'
+
+// 鎷栨嫿缁勪欢灏佽
+defineOptions({ name: 'Draggable' })
+
+// 瀹氫箟灞炴��
+const props = defineProps({
+ // 缁戝畾鍊�
+ modelValue: array<any>().isRequired,
+ // 绌虹殑鍏冪礌锛氱偣鍑绘坊鍔犳寜閽椂锛屽垱寤哄厓绱犲苟娣诲姞鍒板垪琛紱榛樿涓虹┖瀵硅薄
+ emptyItem: any<unknown>().def({}),
+ // 鏁伴噺闄愬埗锛氶粯璁や负0锛岃〃绀轰笉闄愬埗
+ limit: propTypes.number.def(0),
+ // 鏈�灏忔暟閲忥細榛樿涓�1
+ min: propTypes.number.def(1)
+})
+// 瀹氫箟浜嬩欢
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 澶勭悊娣诲姞
+const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}))
+// 澶勭悊鍒犻櫎
+const handleDelete = (index: number) => formData.value.splice(index, 1)
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0