使用Checklist可勾選列表組件-移動開發平台 mPaaS-阿里雲

列表的勾選操作。

在一組清單項目中選擇一個或多個。
可勾選列表的使用需要預設至少勾選一項，方便使用者瞭解列表是可以勾選的。

屬性

屬性	說明	類型	必填	預設值
value	選中資料	string \| number (string \| )[]	否	-
options	ChecklistItem 資料，配置每一列的選項	ChecklistItem[]	否	[]
multiple	是否支援多選	boolean	否	false
className	類名	string	否	-

ChecklistItem

屬性	說明	類型	必填	預設值
title	標題	string	是	-
value	值	string \| value	是	-
image	圖片	string	否	-
description	描述	string	否	-
disabled	是否禁用	boolean	類名	false
readOnly	是否唯讀	boolean	類名	false

事件

事件名	說明	類型
onChange	選中項發生變化，觸發回調	`(value:string\|number\|[], column: ChecklistItem)=>void`

插槽

名稱	說明	類型
content	CheckListItem 自訂樣式	範圍插槽，接收選中的 item 參數
icon	自訂選中 Icon	-

樣式類

類名	說明
amd-checklist	可勾選列表樣式
amd-checklist-item-content	可勾選列表內容樣式
amd-checklist-item-text	可勾選列表內容標題樣式
amd-checklist-item-image	可勾選列表內容圖片樣式
amd-checklist-item-text-description	可勾選列表內容描述樣式
amd-checklist-item-check-icon	可勾選列表內容選中Icon樣式

程式碼範例

基本使用

index.axml 的程式碼範例如下：

<demo-block title="簡單布局-單選" padding="0">
  <checklist 
    value="{{1}}"
    options="{{options_1}}"
    onChange="onChange"
  />
</demo-block>

<demo-block title="複雜布局-多選"  padding="0">
  <checklist 
    value="{{value}}" 
    options="{{options_2}}"
    multiple
    onChange="onChange"
  />
</demo-block>
<demo-block title="禁用狀態" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_3}}"
    multiple
    onChange="onChange"
  />
</demo-block>

<demo-block title="唯讀狀態" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_4}}"
    multiple
    onChange="onChange"
  />
</demo-block>
<demo-block title="自訂勾選表徵圖&&組件內容" padding="0">
  <checklist 
    value="{{[2]}}"
    options="{{options_3}}"
    multiple
    onChange="onChange"
  >
    <view slot="icon">
      <icon color='red' type="LikeOutline" size="x-small" class="demo-checklist-checked-icon"/>
    </view>
    <view slot="content" slot-scope="props">
      title: {{props.item.title}}
    </view>
  </checklist>
</demo-block>

index.js 的程式碼範例如下：

Page({
  data: {
    value: [1, 2],
    options_1: [
      {
        value: 1,
        title: '可勾選清單項目1'
      },
      {
        value: 2,
        title: '可勾選清單項目2'
      },
      {
        value: 3,
        title: '可勾選清單項目3'
      }
    ],
    options_2: [
      {
        value: 1,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "這裡是描述資訊",
        title: '可勾選清單項目1'
      },
      {
        value: 2,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "這裡是描述資訊",
        title: '可勾選清單項目2'
      },
      {
        value: 3,
        image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
        description: "這裡是描述資訊",
        title: '可勾選清單項目3'
      }
    ],
    options_3: [
      {
        value: 1,
        title: '可勾選清單項目1'
      },
      {
        value: 2,
        title: '禁用清單項目2',
        disabled: true
      },
      {
        value: 3,
        title: '可勾選清單項目3'
      }
    ],
    options_4: [
      {
        value: 1,
        title: '可勾選清單項目1'
      },
      {
        value: 2,
        title: '唯讀清單項目2',
        readOnly: true
      },
      {
        value: 3,
        title: '可勾選清單項目3'
      }
    ]
  },
  onChange(v) {
    console.log('當前選中的值為：', v)
  }
})

index.acss 的程式碼範例如下：

.demo-checklist-label {
  font-size: 32rpx;
  color: #999;
  padding: 36rpx 0 16rpx 16rpx;
}

.demo-checklist-checked-icon {
  font-size: 36rpx;
}

index.json 的程式碼範例如下：

{
  "defaultTitle": "Checklist",
  "usingComponents": {
    "checklist": "antd-mini/es/Checklist/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}