Bs-ui-actionsheet NPM

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>

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}

@infinitebrahmanuniverse/nolb-bs-@everything-registry/sub-chunk-1268 @zalastax/nolb-bs-

5 years ago

5 years ago

5 years ago

5 years ago