feat:【ele】【mall】draggable 优化

This commit is contained in:
YunaiV
2025-11-01 21:18:49 +08:00
parent b3e1dab487
commit c6d6d1c1e8

View File

@@ -1,6 +1,4 @@
<script setup lang="ts">
// TODO @芋艿:后续合并到 diy-editor 里,并不是通用的;
import { IconifyIcon } from '@vben/icons';
import { cloneDeep } from '@vben/utils';
@@ -46,7 +44,7 @@ const handleDelete = function (index: number) {
</script>
<template>
<el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
<ElText type="info" size="small"> 拖动左上角的小圆点可对其排序 </ElText>
<VueDraggable
:list="formData"
:force-fallback="true"
@@ -58,34 +56,33 @@ const handleDelete = function (index: number) {
<template #item="{ element, index }">
<div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
<!-- 操作按钮区 -->
<!-- TODO @AI是不是用错了看看项目里有没替代的 -->
<div
class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
style="background-color: var(--app-content-bg-color)"
style="background-color: var(--el-bg-color-page)"
>
<el-tooltip content="拖动排序">
<ElTooltip content="拖动排序">
<IconifyIcon
icon="ic:round-drag-indicator"
class="drag-icon cursor-move"
style="color: #8a909c"
/>
</el-tooltip>
<el-tooltip content="删除">
</ElTooltip>
<ElTooltip content="删除">
<IconifyIcon
icon="ep:delete"
class="cursor-pointer text-red-500"
v-if="formData.length > min"
@click="handleDelete(index)"
/>
</el-tooltip>
</ElTooltip>
</div>
<!-- 内容区 -->
<slot :element="element" :index="index"></slot>
</div>
</template>
</VueDraggable>
<el-tooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
<el-button
<ElTooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
<ElButton
type="primary"
plain
class="mt-1 w-full"
@@ -93,8 +90,6 @@ const handleDelete = function (index: number) {
@click="handleAdd"
>
<IconifyIcon icon="ep:plus" /><span>添加</span>
</el-button>
</el-tooltip>
</ElButton>
</ElTooltip>
</template>
<style scoped lang="scss"></style>