feat(prize-config): 引入拖拽功能并优化奖品配置界面
- 添加 `vue-draggable-plus` 和 `lodash-es` 依赖以支持列表拖拽排序 - 使用 `cloneDeep` 深拷贝奖品列表,避免直接修改原始数据 - 移除原有的手动排序逻辑(上下移动按钮),改用可视化拖拽方式 - 调整 UI 布局和样式,增强用户体验与可操作性 - 在 Demo 页面中添加 draggable 示例用于验证功能实现
This commit is contained in:
@@ -1,6 +1,26 @@
|
||||
<script setup lang='ts'>
|
||||
import { Grip } from 'lucide-vue-next'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
name: 'Joao',
|
||||
id: '1',
|
||||
},
|
||||
{
|
||||
name: 'Jean',
|
||||
id: '2',
|
||||
},
|
||||
{
|
||||
name: 'Johanna',
|
||||
id: '3',
|
||||
},
|
||||
{
|
||||
name: 'Juan',
|
||||
id: '4',
|
||||
},
|
||||
])
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
@@ -11,6 +31,21 @@ onMounted(() => {
|
||||
<button class="btn btn-error">
|
||||
打印
|
||||
</button>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
:animation="150"
|
||||
handle=".handle"
|
||||
class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
|
||||
>
|
||||
<Grip class="handle cursor-move" />
|
||||
<input v-model="item.name" type="text">
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user