DraggableList 双列拖拽

DraggableList 双列拖拽 的基础用法、公开 API 与示例。

基础示例

在左右列表之间拖拽或点击转移条目。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DraggableList } from "@/components/page/draggable-list";

const leftList = ref([
  { id: "1", name: "材料清单" },
  { id: "2", name: "设备台账" },
  { id: "3", name: "人工报价" },
]);
const rightList = ref([{ id: "4", name: "已选合同" }]);
const lastChange = ref("拖动条目后会显示变更信息");

const handleChange = (event: {
  src: string;
  target: string;
  oldIndex?: number;
  newIndex?: number;
}) => {
  lastChange.value = `${event.src} -> ${event.target}，${event.oldIndex} 到 ${event.newIndex}`;
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DraggableList
        left-title="待选资料"
        right-title="已选资料"
        :left-list="leftList"
        :right-list="rightList"
        @on-change="handleChange"
      >
        <template #left="{ item }">
          <div class="drag-list-item">{{ item.name }}</div>
        </template>
        <template #right="{ item }">
          <div class="drag-list-item selected">{{ item.name }}</div>
        </template>
        <template #leftIcon>+</template>
        <template #rightIcon>-</template>
      </DraggableList>
      <p class="drag-event">{{ lastChange }}</p>
    </div>
  </ClientOnly>
</template>

<style scoped>
.drag-list-item {
  padding: 10px 36px 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  background: #ffffff;
}

.drag-list-item.selected {
  border-color: #2f6bff;
  background: #eef4ff;
}

.drag-event {
  margin: 12px 0 0;
  color: #667085;
  font-size: 13px;
}
</style>

隐藏源代码

双列穿梭

展示左右列表的状态回显和自定义标题。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { computed, ref } from "vue";
import { DraggableList } from "@/components/page/draggable-list";

const leftList = ref([
  { id: "1", name: "材料库" },
  { id: "2", name: "设备库" },
  { id: "3", name: "供应商" },
]);
const rightList = ref([{ id: "4", name: "项目资料" }]);
const summary = computed(() => `已选择 ${rightList.value.length} 项资料`);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DraggableList left-title="可选资料" right-title="项目资料包" :left-list="leftList" :right-list="rightList">
        <template #left="{ item }">
          <span class="transfer-item">{{ item.name }}</span>
        </template>
        <template #right="{ item }">
          <span class="transfer-item selected">{{ item.name }}</span>
        </template>
        <template #leftIcon>加入</template>
        <template #rightIcon>移出</template>
      </DraggableList>
      <p class="transfer-summary">{{ summary }}</p>
    </div>
  </ClientOnly>
</template>

<style scoped>
.transfer-item {
  display: block;
  padding: 10px 54px 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  background: #ffffff;
}

.transfer-item.selected {
  border-color: #12b76a;
  background: #ecfdf3;
}

.transfer-summary {
  margin: 12px 0 0;
  color: #667085;
}
</style>

隐藏源代码

引入方式

import { DraggableList } from "@/components/page/draggable-list";

Props

参数	说明	类型	默认值	必填
leftList	左侧数据	DragList[]	[]	否
rightList	右侧数据	DragList[]	[]	否
leftTitle	左侧标题	string	""	否
rightTitle	右侧标题	string	""	否
leftWidth	左侧宽度	string	"50%"	否
rightWidth	右侧宽度	string	"50%"	否
dragClass	拖拽元素 class	DragClass	{ left: [], right: [] }	否
animation	动画	number	200	否

Events

事件名	说明	回调参数
onChange	onChange 事件触发时回调。	value: { src: DragListSide; target: DragListSide; oldIndex?: number; newIndex?: number; },
itemClick	itemClick 事件触发时回调。	id: string, type: DragListSide

Slots

插槽名	说明	参数
leftTitle	leftTitle 内容插槽。	-
left	left 内容插槽。	item
leftIcon	leftIcon 内容插槽。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
DraggableList	导出 DraggableList 供业务侧复用。	useInstall(index)

Types

DraggableListProps

导出 DraggableListProps 供业务侧复用。

字段	说明	类型	默认值	必填
leftList	左侧数据	DragList[]	-	否
rightList	右侧数据	DragList[]	-	否
leftTitle	左侧标题	string	-	否
rightTitle	右侧标题	string	-	否
leftWidth	左侧宽度	string	-	否
rightWidth	右侧宽度	string	-	否
dragClass	拖拽元素 class	DragClass	-	否
animation	动画	number	-	否

DragList

导出 DragList 供业务侧复用。

字段	说明	类型	默认值	必填
id	配置 id。	string	-	是
name	配置 name。	string	-	是

DragClass

导出 DragClass 供业务侧复用。

字段	说明	类型	默认值	必填
left	配置 left。	string[]	-	是
right	配置 right。	string[]	-	是

DraggableListEmits

导出 DraggableListEmits 供业务侧复用。

字段	说明	类型	默认值	必填
onChange	配置 onChange。	[<br> value: {<br> src: DragListSide;<br> target: DragListSide;<br> oldIndex?: number;<br> newIndex?: number;<br> },<br> ]	-	是
itemClick	配置 itemClick。	[id: string, type: DragListSide]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。