配置Selector組件的屬性與事件-移動開發平台 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"
  }
}