# Checkbox 复选框 - 图1 Wuss-weapp

首页

组件库

快速上手

GitHub

首页

组件库

快速上手

GitHub

基础组件

  • 布局

  • 导航

  • 操作反馈

其他

# Checkbox 复选框

# 使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-checkbox": "wuss-weapp/w-checkbox/index",
  3. }

# 图片演示

# Checkbox 复选框 - 图2

# 代码演示

  1. <w-pane title="Checkbox" desc="复选框" />
  3. <w-pane desc="Default" />
  4. <w-cell-group>
  5.     <w-checkbox options="{{ items1 }}" bind:onChange="handleChange" />
  6. </w-cell-group>
  8. <view>{{ items1Str }}</view>
  10. <w-pane desc="Disabled" />
  11. <w-cell-group>
  12.     <w-checkbox options="{{ items2 }}" bind:onChange="handleChange" />
  13. </w-cell-group>
  15. <w-pane desc="Directon" />
  16. <w-cell-group>
  17.     <w-checkbox
  18.      direction="right"
  19.      options="{{ items1 }}"
  20.      bind:onChange="handleChange"
  21.     />
  22. </w-cell-group>
  24. <w-pane desc="IconType" />
  25. <w-cell-group>
  26.     <w-checkbox
  27.    icon-type="circle"
  28.      direction="right"
  29.      options="{{ items1 }}"
  30.      bind:onChange="handleChange"
  31.     />
  32.   <w-checkbox
  33.    icon-type="box"
  34.      direction="right"
  35.      options="{{ items1 }}"
  36.      bind:onChange="handleChange"
  37.     />
  38.   <w-checkbox
  39.    icon-type="check"
  40.      direction="right"
  41.      options="{{ items1 }}"
  42.      bind:onChange="handleChange"
  43.     />
  44. </w-cell-group>
  47. <w-pane desc="ArrayKeys" />
  48. <w-cell-group>
  49.     <w-checkbox
  50.      direction="right"
  51.      options="{{ items3 }}"
  52.      bind:onChange="handleChange"
  53.     />
  54. </w-cell-group>
const MOCK_DATA = {
  productName: 'iphone X max',
  total: 1,
  num: 642135,
  id: 2143324234,
  price: 12700.0,
  desc: 'iphone is good',
};
data: {
  items1Str: '',
  items1: [
    {
      text: '复选框1',
      ...MOCK_DATA,
    },
    {
      text: '复选框2',
      ...MOCK_DATA,
    },
    {
      text: '复选框3',
      ...MOCK_DATA,
    },
  ],
  items2: [
    {
      text: '复选框1',
      ...MOCK_DATA,
    },
    {
      text: '复选框2',
      ...MOCK_DATA,
      disabled: true,
    },
    {
      text: '复选框3',
      ...MOCK_DATA,
    },
  ],
  items3: ['测试1','测试2','测试3','测试4','测试5'],
},
handleChange(e) {
  console.log(e.detail.checked)
  this.setData({ items1Str: JSON.stringify(e.detail.checked) });
},

# API

# Attribute 属性

属性 说明 类型 默认值
color 颜色 string -
disabled 禁用 boolean false
title 标题 string -
direction 方向，可选值有[left/right] string -
options 传入的数组对象，参数有 { label,checked,disabled } array []

# Event 事件

事件名 说明 参数
onChange 勾选点击改变值时触发 function:(e) => e.detail.value

# Class 自定义类名

类名 说明
wuss-class 根节点样式类

Edit this page

← Radio 单选框 CellPicker 选择器 →