25.穿梭框模块

学习要点：
1.穿梭框模块
本节课我们来开始了解 Layui 的内置模块：穿梭框模块。
一．穿梭框模块
1. 穿梭框模块，即将左边的内容，可选的转移到右边，先来看下基本设置；
<div id="test"></div>
layui.use(['transfer'], () => {
const transfer = layui.transfer
//实例化
transfer.render({
//绑定 dom
elem : '#test',
//数据
data : [
{
'value' : '1',
'title' : '李白',
'checked' : true
},
{
'value' : '2',
'title' : '杜甫',
'checked' : ''
},
]
})
})
2. 对于参数，下面列出比较常用的属性，更多参考手册：
属性 描述
elem 容器选择器，DOM 对象
title 穿梭框上方的标题
data 数据源
parseData 用于解析数据
value 右侧初始选中的数据
id 唯一索引
showSearch 是否开启搜索
width 长度
height 高度
text 自定义文本
onchange 左右穿梭时的回调
PS：关于数据解析，和数据模块一样，将不合法的数据解析成合法的，这里不再演示；
transfer.render({
//绑定 dom
elem : '#test',
title : ['左侧', '右侧'],
showSearch : true,
//回调
onchange(obj) {
console.log(obj)
},
})