Transfer

简易介绍

Transfer 穿梭框组件，用于在两栏中移动数据选项。mengyue-components 进行了封装并进行了 vitest 测试。 可以使用 <MYTransfer></MYTransfer> 来实现数据穿梭功能。

基本用法

基础穿梭框

基础的穿梭框组件，支持数据在左右两栏之间移动。

代码演示

列表一

• 选项三
• 选项四
• 禁用选项

列表二

• 选项一
• 选项二

<template>
  <MYTransfer 
    v-model='value'
    :data='data'
    :titles='['列表一', '列表二']'
  />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([1, 2])
const data = ref([
  { key: 1, label: '选项一', disabled: false },
  { key: 2, label: '选项二', disabled: false },
  { key: 3, label: '选项三', disabled: false },
  { key: 4, label: '选项四', disabled: false },
  { key: 5, label: '禁用选项', disabled: true }
])
</script>

展开代码

自定义标题

使用 titles 属性自定义左右两栏的标题。

代码演示

源列表

• 苹果
• 橙子
• 芒果

目标列表

• 香蕉
• 葡萄

<template>
  <MYTransfer 
    v-model='value'
    :data='data'
    :titles='['源列表', '目标列表']'
  />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([2, 4])
const data = ref([
  { key: 1, label: '苹果', disabled: false },
  { key: 2, label: '香蕉', disabled: false },
  { key: 3, label: '橙子', disabled: false },
  { key: 4, label: '葡萄', disabled: false },
  { key: 5, label: '芒果', disabled: false }
])
</script>

展开代码

自定义颜色

使用 backgroundColor、colorText 和 hoverBackground 属性自定义穿梭框的颜色。

代码演示

浅色主题

• 选项二
• 选项四

浅色主题

• 选项一
• 选项三

<template>
  <MYTransfer 
    v-model='value'
    :data='data'
    background-color='#f0f9ff'
    color-text='#0369a1'
    hover-background='#e0f2fe'
    :titles='['浅色主题', '浅色主题']'
  />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([1, 3])
const data = ref([
  { key: 1, label: '选项一', disabled: false },
  { key: 2, label: '选项二', disabled: false },
  { key: 3, label: '选项三', disabled: false },
  { key: 4, label: '选项四', disabled: false }
])
</script>

展开代码

深色主题

使用深色背景创建深色主题的穿梭框。

代码演示

深色主题

• 项目一
• 项目三
• 项目四

深色主题

• 项目二
• 项目五

<template>
  <MYTransfer 
    v-model='value'
    :data='data'
    background-color='#1e293b'
    color-text='#f1f5f9'
    hover-background='#334155'
    :titles='['深色主题', '深色主题']'
  />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([2, 5])
const data = ref([
  { key: 1, label: '项目一', disabled: false },
  { key: 2, label: '项目二', disabled: false },
  { key: 3, label: '项目三', disabled: false },
  { key: 4, label: '项目四', disabled: false },
  { key: 5, label: '项目五', disabled: false }
])
</script>

展开代码

禁用选项

数据中包含禁用选项，用户无法选择或移动这些选项。

代码演示

可选列表

• 可选项一
• 禁用选项一
• 可选项三
• 禁用选项二
• 可选项四

已选列表

• 可选项二

<template>
  <MYTransfer 
    v-model='value'
    :data='data'
    :titles='['可选列表', '已选列表']'
  />
</template>
<script setup>
import { ref } from 'vue'
const value = ref([2])
const data = ref([
  { key: 1, label: '可选项一', disabled: false },
  { key: 2, label: '可选项二', disabled: false },
  { key: 3, label: '禁用选项一', disabled: true },
  { key: 4, label: '可选项三', disabled: false },
  { key: 5, label: '禁用选项二', disabled: true },
  { key: 6, label: '可选项四', disabled: false }
])
</script>

展开代码

动态数据

结合动态数据源创建穿梭框。

代码演示

所有用户

• 李四
• 赵六
• 钱七

已选用户

• 张三
• 王五

已选择用户: 张三, 王五

<template>
  <div>
    <MYTransfer 
      v-model='selectedUsers'
      :data='users'
      :titles='['所有用户', '已选用户']'
    />
    <div style='margin-top: 16px;'>
      <p>已选择用户: {{ selectedUsersLabels }}</p>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const selectedUsers = ref([101, 103])
const users = ref([
  { key: 101, label: '张三', disabled: false },
  { key: 102, label: '李四', disabled: false },
  { key: 103, label: '王五', disabled: false },
  { key: 104, label: '赵六', disabled: false },
  { key: 105, label: '钱七', disabled: false }
])
const selectedUsersLabels = computed(() => {
  return users.value
    .filter(user => selectedUsers.value.includes(user.key))
    .map(user => user.label)
    .join(', ')
})
</script>

展开代码

API 参考

Transfer Props

参数	说明	类型	可选值	默认值
modelValue	选中项的 key 数组	number[]	—	[]
data	数据源	Option[]	—	[]
titles	自定义左右列表的标题	string[]	—	[]
backgroundColor	背景颜色	string	—	''
colorText	文字颜色	string	—	''
hoverBackground	悬停背景色	string	—	''

数据类型

interface Option {
  key: number;
  label: string;
  disabled: boolean;
}

interface TransferProps {
  modelValue: number[];
  data: Option[];
  titles?: string[];
  backgroundColor?: string;
  colorText?: string;
  hoverBackground?: string;
}