如何设置选择组Selector_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

提供多个选项供用户选择，一般在筛选和表单中使用当作为表单组件，配合 Form/FormItem 组件使用时，需要设置 mode 的值为 form。

属性

type SelectorItem = {
  text: string;
  value: string|number;
  subText?: srting;
  disabled?: boolean;
}

属性	类型	必填	默认值	说明
value	string \| number \| string[] \| number[]	否	-	已选择项，取 items 每一项的 value
items	SelectorItem[]	是	-	可选项
activeItemClassName	string	否	-	每一项激活时新加类名
multiple	boolean	否	false	是否允许多选，标签栏显示的时候会显示当前单选/多选的状态
title	string	否	''	标签栏标题
desc	string	否	''	标签栏说明
id	string	否	-	表单元素 id
name	string	否	-	表单元素 name
disabled	boolean	否	false	是否禁用
mode	'noraml' \| 'form'	否	'normal'	配合 From/FormItem 组件使用时，mode 需设置为 form
className	string	否	-	类名

事件

事件名	说明	类型
onChange	选中值发生变化，触发回调	`(v: string \| string[], selectedItem: SelectItem \| SelectItem[] ) => void`

样式类

类名	说明
amd-selector	整体样式
amd-selector-disabled	禁用状态下的整体样式
amd-selector-content	单个选项样式
amd-selector-item	单个选项样式
amd-selector-item-active	激活状态下单个样式
amd-selector-item-disabled	禁用状态下单个选项样式
amd-selector-item-text	文本样式
amd-selector-item-subtext	副文本样式
amd-selector-item-badge-active	激活状态下徽标样式

代码示例

基本使用

index.axml 的代码示例如下：

<selector 
  title="单选"
  value="11"
  items="{{items1}}"/>

<selector 
  title="单选"
  value="2"
  desc="选项带有副标题"
  items="{{items2}}"/>

<selector 
  title="多选"
  value="{{['1','2']}}"
  items="{{items1}}"
  multiple="{{true}}"/>

<selector 
  title="全禁用"
  value="{{['1','2']}}"
  items="{{items1}}"
  disabled="{{true}}"
  multiple="{{true}}"/>

<selector 
  title="部分禁用"
  value="{{['1','2']}}"
  items="{{items3}}"
  multiple="{{true}}"/>

<selector 
  title="更改值"
  value="{{value}}"
  items="{{items1}}"
  onChange="handleChange"/>

<view class="valusBox">
  <button 
    type="danger-ghost"
    inline="{{true}}"
    inlineSize="larger"
    onTap="handleChangeValue"
    data-value="11">
    改变选中值为： 3
  </button>
</view>

index.js 的代码示例如下：

Page({
  data: {
    items1: [
      { text: '选项一', value: '1' },
      { text: '选项二', value: '2' },
      { text: '选项三', value: '11' }],
    items2: [
      { text: '选项一', subText: '副标题一', value: '1' },
      { text: '选项二', subText: '副标题二', value: '2' },
      { text: '选项三', subText: '副标题三', value: '3' }],
    items3: [
      { text: '选项一', subText: '副标题一', value: '1' },
      { text: '选项二', subText: '副标题二', value: '2', disabled: true },
      { text: '选项三', subText: '副标题三', value: '3' }],
    items: [
      {
        text: '选项一',
        value: '1',
      },
      {
        text: '选项二',
        subText: '描述文案 2',
        value: '2',
      },
      {
        text: '选项三',
        disabled: true,
        value: '3',
      },
      {
        text: '选项四',
        subText: '描述文案 4',
        disabled: true,
        value: '4',
      },
      {
        text: '选项五',
        subText: '描述文案 5',
        value: '5',
      },
    ],
    value: '1',
  },
  handleChangeValue(e) {
    const { value } = e.currentTarget.dataset;
    this.setData({
      value,
    });
  },
  handleChange(e) {
    this.setData({
      value: e,
    });
  },
});

index.acss 的代码示例如下：

.btns,
.valusBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #fff;
}
.btns .amd-button {
  flex: 1;
  margin: 0 12rpx;
}
.valusBox {
  flex-wrap: wrap;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Selector",
  "usingComponents": {
    "selector": "antd-mini/es/Selector/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}