ieplus-app/src/pagesOther/pages/vhs/index/components/vhs-majors-draggable-list.vue

<template>
  <view class="mt-10">
    <l-drag ref="dragRef" :list="majors" :column="1" gridHeight="56px" :touchHandle="touchHandle" ghost handle
      @change="changeSort">
      <!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
      <template #grid="{ active, content, index }">
        <!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
        <view
          class="bg-back rounded-6 h-[44px] pl-30 pr-20 relative flex items-center gap-x-16 mb-[10px] border border-solid"
          :class="[active ? 'border-primary' : 'border-transparent']">
          <view class="text-32 text-fore-placeholder font-bold">{{ toFixedLen(index) }}</view>
          <view class="flex-1 w-1 h-full leading-[44px] text-28 text-fore-title font-bold ellipsis-1">
              {{ content.marjorName }}[{{ content.marjorBelongs }}]
          </view>
          <uv-icon name="trash" size="18" color="error" @click="handleDelete(content)" />
          <view slot="handle" @touchstart="handleDragStart" @touchend="handleDragEnd">
            <uv-icon name="list-dot" size="18" color="primary" />
          </view>
        </view>
      </template>
      <template #ghost></template>
    </l-drag>
  </view>
</template>
<script lang="ts" setup>
import type { VHS } from '@/types';
// import { VOLUNTARY_REFRESHER_ENABLED } from "@/types/injectionSymbols";

const props = defineProps<{
  majors: VHS.VoluntaryMajor[];
}>();
// const refresherEnabled = inject(VOLUNTARY_REFRESHER_ENABLED) || ref(false)
const emits = defineEmits<{
  (e: "delete", major: VHS.VoluntaryMajor): void;
  (e: "update:majors", majors: VHS.VoluntaryMajor[]): void;
  (e: "change", majors: VHS.VoluntaryMajor[]): void;
}>();
const touchHandle = ref(false)

const handleDragStart = () => {
  touchHandle.value = true;
  // refresherEnabled.value = false;
}
const handleDragEnd = () => {
  touchHandle.value = false;
  // refresherEnabled.value = true;
}
const changeSort = (e: any) => {
  const list = e.map((item: any) => item.content);
  emits('update:majors', list);
  emits('change', list);
}
const handleDelete = (major: VHS.VoluntaryMajor) => {
  emits('delete', major);
}
const toFixedLen = (i: number, len: number = 1) => {
  return String(i + 1).padStart(len, "0");
}
</script>
<style lang="scss" scoped></style>