×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：checkbox-group多选

checkbox-group 多选

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

我们提供的服务有：成都网站设计、做网站、微信公众号开发、网站优化、网站认证、砀山ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的砀山网站制作公司

属性说明

属性名 类型 必填 默认值 说明

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扫码

代码示例

 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
  3.  column="3"
    4.   
  
  
  4.  option-key="name"
    5.   
  
  
  5.  options="{{threeColumnOptions}}"
    6.   
  
  
  6.  value="{{[7]}}"
    7.   
  
  
  7.  bind:change="groupChange"
    8.   
  
  
  8. >
    9.   
  
  
    10.   
  
  
    11.   
  
  
    12.   
  
  
  12.  option-key="name"
    13.   
  
  
  13.  column="2"
    14.   
  
  
  14.  options="{{twoColumnOptions}}"
    15.   
  
  
  15.  value="{{[5]}}"
    16.   
  
  
  16.  bind:change="groupChange"
    17.   
  
  
  17. >
    18.   
  
  
    19.   
  
  
    20.   
  
  
    21.   
  
  
  21.  option-key="name"
    22.   
  
  
  22.  checkbox-group-class="checkbox-group"
    23.   
  
  
  23.  column="3"
    24.   
  
  
  24.  options="{{threeColumnDisabledOptions}}"
    25.   
  
  
  25.  value="{{[1]}}"
    26.   
  
  
  26.  bind:change="groupChange"
    27.   
  
  
  27. >
    28.   
  
  
    29.

分享题目：创新互联百度小程序教程：checkbox-group多选
网站网址：http://cdbrznjsb.com/article/djeogop.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务