Easy UI

Appearance

Transfer 穿梭框 ​

Transfer 是一个用于在两个列表之间移动数据的穿梭框组件，支持数据筛选、自定义渲染、多选操作等功能。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-transfer.js";
</script>
js
import "easy-component-ui/ea-transfer";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

最基本的穿梭框用法，包含左右两个面板和移动按钮。

查看代码
html
<div class="demo">
  <ea-transfer id="basicTransfer"></ea-transfer>
</div>
js
const basicExample = {
  transfer: document.querySelector("#basicTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();
    this.transfer.data = data;
  },
};
basicExample.init();

可搜索过滤 ​

通过设置 filterable 属性启用搜索功能，可以快速筛选数据。

查看代码
html
<div class="demo">
  <ea-transfer id="filterableTransfer" filterable></ea-transfer>
</div>
js
const filterableExample = {
  transfer: document.querySelector("#filterableTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();
    this.transfer.data = data;
  },
};
filterableExample.init();

自定义用法 ​

支持自定义面板标题、按钮文本、空状态内容等。

Customize data items using render-content

Operation
Operation
查看代码
html
<div class="demo">
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <ea-transfer
      id="customTransfer"
      style="text-align: left; display: inline-block"
      filterable
    >
      <div slot="left-footer">
        <ea-button size="small" style="margin-left: 15px; padding: 6px 5px">
          Operation
        </ea-button>
      </div>
      <div slot="right-footer">
        <ea-button size="small" style="margin-left: 15px;padding: 6px 5px">
          Operation
        </ea-button>
      </div>
    </ea-transfer>
  </div>
</div>
js
const customExample = {
  transfer: document.querySelector("#customTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    const data = this.generateData();

    this.transfer.titles = ["Source", "Target"];
    this.transfer.buttonTexts = ["To right", "To left"];

    this.transfer.data = data;

    this.transfer.value = [1, 2, 3];

    this.transfer.addEventListener("change", event => {
      console.log("Selection changed:", event.detail.value);
    });

    this.transfer.addEventListener("ea-left-check-change", event => {
      console.log("Left check changed:", event.detail);
    });

    this.transfer.addEventListener("ea-right-check-change", event => {
      console.log("Right check changed:", event.detail);
    });
  },
};
customExample.init();

自定义空内容 ​

可以为左右面板分别自定义空状态显示内容。

Customize empty content for both panels

📭
No data
📭
No data
查看代码
html
<div class="demo">
  <p style="text-align: center; margin: 0 0 20px">
    Customize empty content for both panels
  </p>
  <div style="text-align: center">
    <ea-transfer id="emptyTransfer">
      <div slot="left-empty">
        <div style="text-align: center; padding: 20px; color: #909399">
          <div style="font-size: 60px; margin-bottom: 10px">📭</div>
          <div>No data</div>
        </div>
      </div>
      <div slot="right-empty">
        <div style="text-align: center; padding: 20px; color: #909399">
          <div style="font-size: 60px; margin-bottom: 10px">📭</div>
          <div>No data</div>
        </div>
      </div>
    </ea-transfer>
  </div>
</div>
js
const emptyExample = {
  transfer: document.querySelector("#emptyTransfer"),

  generateData: () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      });
    }
    return data;
  },

  init() {
    this.transfer.data = this.generateData();

    this.transfer.addEventListener("change", event => {
      console.log("Selection changed:", event.detail.value);
    });
  },
};
emptyExample.init();

Transfer API ​

Transfer Attributes ​

参数说明类型可选值默认值
disabled是否禁用Boolean—false
filterable是否可搜索Boolean—false
filter-placeholder搜索框占位符String—"请输入搜索内容"
data prop数据源dataProps[]—[]
value prop已选中的数据项Array—[]
dataProps prop数据字段映射配置Object—{ key: "key", label: "label", disabled: "disabled" }
titles prop面板标题Array—[]
buttonTexts prop按钮文本Array—[]
filterMethod prop自定义筛选方法Function—null
leftDefaultChecked prop左侧默认选中项Array—[]
rightDefaultChecked prop右侧默认选中项Array—[]

Transfer Methods ​

方法名说明参数
clearQuery清空搜索关键词which: 'left' | 'right'

Transfer Events ​

事件名说明回调参数(event.detail)
change选中项变化时触发{ value: any[] }
ea-left-check-change左侧面板选中项变化时触发{ value: any[], movedKeys?: any[] }
ea-right-check-change右侧面板选中项变化时触发{ value: any[], movedKeys?: any[] }

Transfer CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container组件容器
panel面板容器
source-panel左侧面板
target-panel右侧面板
buttons按钮区域
button移动按钮
move-to-right-btn向右移动按钮
move-to-left-btn向左移动按钮

Transfer Slots ​

名称说明
left-empty左侧面板空状态内容
right-empty右侧面板空状态内容
left-footer左侧面板底部内容
right-footer右侧面板底部内容

Transfer CSS Custom Properties ​

属性名说明默认值
--ea-transfer-width面板宽度200px
--ea-transfer-height面板高度300px
--ea-transfer-border-color边框颜色var(--grey-200)
--ea-transfer-border-radius边框圆角var(--border-radius-sm)
--ea-transfer-bg-color背景颜色var(--color-white)
--ea-transfer-button-bg-color按钮背景颜色var(--blue-500)
--ea-transfer-button-disabled-bg-color按钮禁用背景颜色var(--grey-200)
--ea-transfer-button-hover-bg-color按钮悬停背景颜色var(--blue-400)
--ea-transfer-transition过渡动画时长var(--transition-fast)
--ea-transfer-font-size字体大小var(--font-size-md)

TransferPanel API ​

TransferPanel CSS Part ​

名称说明
container面板容器
header面板头部
checkbox全选复选框
title标题
count计数显示
body面板主体
filter-wrapper搜索框容器
filter搜索框
empty空状态区域
list列表容器
item-checkbox列表项复选框
item-label列表项标签
footer面板底部

TransferPanel Slots ​

名称说明
empty空状态内容
footer面板底部内容

TransferPanel CSS Custom Properties ​

属性名说明默认值
--ea-transfer-panel-width面板宽度200px
--ea-transfer-panel-height面板高度300px
--ea-transfer-panel-border-color边框颜色var(--grey-300)
--ea-transfer-panel-background-color背景颜色var(--white)
--ea-transfer-panel-header-height头部高度40px
--ea-transfer-panel-header-background头部背景颜色var(--grey-100)
--ea-transfer-panel-item-height列表项高度32px
--ea-transfer-panel-item-hover-background列表项悬停背景颜色var(--grey-100)
--ea-transfer-panel-item-selected-background列表项选中背景颜色var(--blue-100)
--ea-transfer-panel-item-selected-color列表项选中文字颜色var(--blue-600)
--ea-transfer-panel-item-disabled-color列表项禁用文字颜色var(--grey-400)
--ea-transfer-panel-filter-height搜索框高度40px
--ea-transfer-panel-footer-height底部高度40px
--ea-transfer-panel-footer-background底部背景颜色var(--white)
--ea-transfer-panel-footer-border-color底部边框颜色var(--grey-300)