后浪云百度小程序教程：checkbox-group 多选

2023-6-16

checkbox-group 多选
- 属性说明
- 示例
  - 代码示例

checkbox-group 多选

解释：多项选择组件，为开发者提供多项选择功能。

属性说明

属性名	类型	必填	默认值	说明
value	Array	否	[]	已选的值
disabled	Boolean	否	false	是否禁止点击
column	Number	否	1	组件按照几列展示
options	Array	是		组件内容数组，如： [{ name: ‘两字’, value: ‘1’, desc: ‘描述’ }]，其中 name 为展示文案， value 为对应的值， desc 为描述文案
options-key	String	否	name	options 数组中的 key，如 name
itemStyle	Object	否	{}	组件每一项的内联样式，如： { color: ‘#2772fb’}
iconStyle	Object	否	{}	组件某一项选中时的 icon 样式，如： { color: ‘#2772fb’, name: ‘checked-l’ }
active-text-color	String	否	#2772fb	选中时的文字颜色
active-icon-color	String	否	#2772fb	选中时的 icon 颜色
active-bg-color	String	否	rgba ( 39 , 114 , 251, .04 )	选中时的背景颜色
checkbox-group-class	String	否		组件的外部样式类，可用于修改组件最外层样式
bindchange	EventHandle	否		点击组件每一项时触发，可用于获取已选择的 value 值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

 
 
 
  
  
  <!-- 三列样式 -->
  
  
  <smt-checkbox-group
  
  
   column="3"
  
  
   option-key="name"
  
  
   options="{{threeColumnOptions}}"
  
  
   value="{{[7]}}"
  
  
   bind:change="groupChange"
  
  
  >
  
  
  </smt-checkbox-group>
  
  
  <!-- 两列样式 -->
  
  
  <smt-checkbox-group
  
  
   option-key="name"
  
  
   column="2"
  
  
   options="{{twoColumnOptions}}"
  
  
   value="{{[5]}}"
  
  
   bind:change="groupChange"
  
  
  >
  
  
  </smt-checkbox-group>
  
  
  <!-- 三列禁止样式 -->
  
  
  <smt-checkbox-group
  
  
   option-key="name"
  
  
   checkbox-group-class="checkbox-group"
  
  
   column="3"
  
  
   options="{{threeColumnDisabledOptions}}"
  
  
   value="{{[1]}}"
  
  
   bind:change="groupChange"
  
  
  >
  
  
  </smt-checkbox-group>

作者：后浪云

链接：https://www.idc.net/help/185989/

文章版权归作者所有，未经允许请勿转载。

THE END