0.0.5 • Published 11 months ago
Last release 11 months ago
Share package vue-transfer-three 三栏穿梭框 transferThree component ,the components is based on ElementUI's transfer component, it has three transfer
该三栏穿梭框是基于element中的transfer穿梭框实现的，目前如果需要使用该组件需要引入elementui框架，后续会抽离出来使其不安装element也能使用。也会继续优化该插件的。
Build Setup # if you need to use this component，your vue project must install ElementUI and use it
npm i element-ui -S
# use it in your project,for example
import transferThree from 'vue-transfer-three/packages/transferThree'
export default {
components: {
transferThree
}
}Attributes 参数 说明 类型 可选值 默认值 data 中间Transfer的数据源 array[{ key, label, disabled }] — [ ] leftData 左边Transfer的数据源 array[{ key, label, disabled }] — [ ] rightData 右边Transfer的数据源 array[{ key, label, disabled }] — [ ] titles 自定义列表标题 array — ['列表 1', '列表 2'，'列表 3'] left-default-checked 初始状态下左侧列表的已勾选项的 key 数组 array — [ ] source-default-checked 初始状态下中间列表的已勾选项的 key 数组 array — [ ] right-default-checked 初始状态下右侧列表的已勾选项的 key 数组 array — [ ] filterable 是否可搜索 boolean — false filter-placeholder 搜索框占位符 string — 请输入搜索内容 filter-method 自定义搜索方法 function — — render-content 自定义数据项渲染函数 function(h, option) — —
Slot name 说明 left-footer 左侧列表底部的内容 source-footer 中间列表底部的内容 right-footer 右侧列表底部的内容
Methods 方法名 说明 参数 clearQuery 清空某个面板的搜索关键词 'left' / 'middle' /'right'，指定需要清空的面板
Events 事件名称 说明 回调参数 change 列表元素发生变化时触发 数据移动的方向、发生移动的数据key数组 、左侧数据列表、中间数据列表、右边数据列表 left-check-change 左侧列表元素被用户选中 / 取消选中时触发 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 middle-check-change 中间列表元素被用户选中 / 取消选中时触发 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 right-check-change 右侧列表元素被用户选中 / 取消选中时触发 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组