smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【ele】【mall】draggable 优化

Browse Source
This commit is contained in:
YunaiV
2025-11-01 21:18:49 +08:00
parent b3e1dab487
commit c6d6d1c1e8
1 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
View File

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