bs-ui-actionsheet

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

小程序内的下拉选择actionsheet组件。

功能介绍

• 基础的下拉选择组件
• 仅支持单列选择
• 支持string数组，int数组，对象数组
• 支持设置选定项，设置展示属性

使用方法

1. 安装

npm i bs-ui-actionsheet -s

1. .json

"usingComponents": {
    "bs-actionsheet": "miniprogram_npm/bs-ui-actionsheet/index"
  }

1. .wxml

<bs-actionsheet range="{{range}}" range-name="{{rangeName}}" range-value="{{rangeValue}}" selected="{{selected}}" bindpickerchange="pickerChange" bindpickercancel="pickerCancel"></bs-actionsheet>

1. .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}