README
bs-ui-actionsheet
这个项目是从bs-ui-seed基础创建出来的. 请查看
base/README.md
来了解其基础内容.
小程序内的下拉选择actionsheet组件。
功能介绍
- 基础的下拉选择组件
- 仅支持单列选择
- 支持string数组,int数组,对象数组
- 支持设置选定项,设置展示属性
使用方法
- 安装
npm i bs-ui-actionsheet -s
- .json
"usingComponents": {
"bs-actionsheet": "miniprogram_npm/bs-ui-actionsheet/index"
}
- .wxml
<bs-actionsheet range="{{range}}" range-name="{{rangeName}}" range-value="{{rangeValue}}" selected="{{selected}}" bindpickerchange="pickerChange" bindpickercancel="pickerCancel"></bs-actionsheet>
- .js
data: {
range: [{
name: '张三',
value: 1
}, {
name: '李四',
value: 2
}, {
name: '王五',
value: 3
}],
rangeName: 'name',
rangeValue: 'value',
selected: {
value: 2
}
},
pickerChange(e) {
console.log('change', e);
},
pickerCancel(e) {
console.log('cancel', e)
}
接口说明
Properties
Property | Type | Required | Default Value | Comments |
---|---|---|---|---|
range |
Array | required | [] | 需要选择的下拉列表,目前仅支持一维数组(支持string数组,int数组,对象数组) |
rangeName |
String | optional | -- | 当数组类型为对象数组时,设置哪个属性为显示的 |
rangeValue |
String | optional | -- | 当数组类型为对象数组时,设置哪个属性为具体数据的value |
disabled |
Boolean | optional | false | 设置组件是否是禁用状态 |
defaultName |
String | optional | -- | 无任何选中项时候的名称,一般用于表单页面 |
icon |
String | optional | 'arrow' | 选中文字后面的样式,默认为向下箭头,配置为custom则表示启用slot支持。 |
selected |
Number/String/Object | optional | -- | 设置默认的选中值,见如下描述 |
selected属性描述
- 设置选中值(如果值为null或不存在,则默认选中第一项),否则按照如下规则进行处理
- 如果rangeValue为空
- 该值类型为数字,则表示数组的索引
- 该值类型为字符串,则表示的具体内容。
- 如果rangeValue不为空
- 该值类型为数字或者字符串,则表示数字中某一项的rangeValue对应的属性的值=selected
- 该值类型为对象,则表示数组中某一项的rangeValue对应的属性的值=selected中的rangeValue属性对应的值
Events
Event | Required | Comments |
---|---|---|
pickerchange |
optional | 在用户选择了一项并点击确定时触发(detail数据为:{ selectedIndex , selectedName , value } |
pickercancel |
optional | 在用户点击取消时触发 |
自定义样式
Class Name | Comments |
---|---|
cm-actionsheet | 自定义actionsheet组件中的picker的样式 |
cm-actionsheet-view | 自定义actionsheet组件中的picker内已选择的值的样式,默认样式为{ font-size: 28rpx;font-weight: 700;color: #000} |