tingle-slot
Slot 是老虎机滚轮选择器。
Install
npm install tingle-slot --save
Simple Usage
{ superprops; thisstate = // 数据模型 data: text: 'Jan' value: 0 text: 'Feb' value: 1 text: 'Mar' value: 2 text: 'Apr' value: 3 text: 'May' value: 4 text: 'Jun' value: 5 text: 'Jul' value: 6 text: 'Aug' value: 7 text: 'Sep' value: 8 text: 'Oct' value: 9 text: 'Nov' value: 10 text: 'Dec' value: 11 // 选中的值 value: text: 'Aug' value: 7 // 上次选中的值(取消选择时恢复用) confirmedValue: text: 'Aug' value: 7 ;} { thisrefsslot;} { // 确认选中项目 this;} { // 选中项目改变 this;} { // 取消之前的操作,恢复上次确认的值 this;} { var t = this; return <div> <Button size="l" onClick=tshowSlot>show slot</Button> <Slot ref="slot" data=tstatedata value=tstatevalue title="title" onConfirm=thandleConfirm onChange=thandleChange onCancel=thandleCancel/> </div> ;}
Props
Slot 对数据格式的要求比较苛刻,但这是必要的!为了方便用户的使用,提供了两个静态的 formatXxx 函数供用户使用,详见下面的 API。
className
描述:自定义样式的 class
名称。
类型:string
必选:否
示例:
<Slot className="customClass"></Slot>
data
描述:数据。
类型:Array<Array<Object>>
必选:否
data 是一个二维数组,第一维表示滚轮列,第二维表示各列中的选项。
每个选项必须包括 text(显示的文字) 和 value(选项的值) 属性。典型的格式如下:
示例:
text: '江苏' value: 'jiangsu' text: '浙江' value: 'zhejiang' text: '杭州' value: 'hangzhou' text: '宁波' value: 'ningbo'
value
描述:选中数据。
类型:Array<Object>
必选:否
value 是一个一维数组,分别表示每一列的选中值。
数组中的元素一般为 data 中对应选项的引用,也可以通过 value 属性来和选项建立绑定。典型的格式如下:
示例:
text: '浙江' value: 'zhejiang' text: '杭州' value: 'hangzhou'
title
描述:弹出滚动选择器的标题。
类型:string
必选:否
示例:
<Slot title="标题"></Slot>
confirmText
描述:确认文案。
类型:string
默认:'完成'
必选:否
示例:
<Slot confirmText="完成"></Slot>
cancelText
描述:取消文案。
类型:string
默认:'取消'
必选:否
示例:
<Slot cancelText="取消"></Slot>
scrollMod
描述:数据替换后的滚动模式。
类型:function
默认:'reset'
必选:否
示例:
<Slot scrollMod="reset"></Slot>
scrollMod 目前有两种模式:
reset
模式(默认),会直接替换列数据,并定位到第一个值keep
模式,会尝试在新的列数据中查找旧列的已选中值,并定位到该值
onChange(value, column, index)
描述:列选中变化触发的事件。
类型:function
必选:否
示例:
<Slot onChange= { // value(当前选中值数组), column(当前变更的列), index(当前选中的项) // DO SOMETHING}></Slot>
onConfirm(value)
描述:确认所有选中触发的事件。
类型:function
必选:否
示例:
<Slot onConfirm= { // value(当前选中值数组) // DO SOMETHING}></Slot>
onCancel()
描述:取消当前选中触发的事件。
类型:function
必选:否
示例:
<Slot onCancel= { // DO SOMETHING}></Slot>
APIs
.show()
描述:显示选择器。
示例:
slot;
.hide()
描述:隐藏选择器。
示例:
slot;
Slot.formatDataValue(data[, value])
描述:data
和 value
的非标准格式兼容,返回标准格式的 { data, value }。
示例:
t;
-
data 格式兼容以下几种场景
-
data 选项中如果 text 或 value 缺少任意一项,都会用另一项替代。
text: '江苏' // => { text: '江苏', value: '江苏' }value: '浙江' // => { text: '浙江', value: '浙江' } -
如果数组元素不是对象,那么 text 和 value 都会被赋值为元素本身。
'江苏' // => { text: '江苏', value: '江苏' }'浙江' // => { text: '浙江', value: '浙江' } -
如果传入是一个一维数组,则自动包裹为二维数组。
'江苏' '浙江' // => [ [ { text: '江苏', value: '江苏' }, { text: '浙江', value: '浙江' } ] ]
-
-
value 格式兼容以下场景
- 数组元素不是对象。会对应到 value 是数组元素本身的选项。
- 如果数组元素不能对应到任何选项,则默认对应到第一个选项。
Slot.formatColumnValue(columnData[, columnValue])
描述:替换单列的 data 和 value 时使用,兼容规则同上。
columnData
列数据,一维数组。
columnValue
选中的选项。
返回标准格式的 { columnData, columnValue }
示例:
t;