bs-ui-actionsheet

Base Readme

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

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

功能介绍

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

使用方法

1. 安装

npm i bs-ui-actionsheet -s

2. .json

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

3. .wxml

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

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