简体中文
组件类型:UniCheckboxGroupElement
多项组,内部由多个checkbox组成
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
name | string | - | 表单的控件名称,作为键值对的一部分与表单(form组件)一同提交 |
@change | (event: UniCheckboxGroupChangeEvent) => void | - | checkbox-group中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]} |
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniCheckboxGroupChangeEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | ||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | ||||||||||
type | string | 是 | - | 事件类型 | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
Android | iOS | web | |
---|---|---|---|
name | 3.9 | 4.11 | 4.0 |
@change | 3.9 | 4.11 | 4.0 |
组件类型:UniCheckboxElement
多选项。在1组check-group中可选择多个
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
disabled | boolean | false | 是否禁用 |
value | string | - | checkbox 标识,选中时触发 checkbox-group 的 change 事件,并携带 checkbox 的 value |
checked | boolean | false | 当前是否选中,可用来设置默认选中 |
color | string(string.ColorString) | "#007aff" | checkbox的颜色 |
backgroundColor | string(string.ColorString) | "#ffffff" | checkbox默认的背景颜色 |
borderColor | string(string.ColorString) | "#d1d1d1" | checkbox默认的边框颜色 |
activeBackgroundColor | string(string.ColorString) | "#ffffff" | checkbox选中时的背景颜色 |
activeBorderColor | string(string.ColorString) | "#d1d1d1" | checkbox选中时的边框颜色 |
iconColor | string(string.ColorString) | "#007aff" | checkbox的图标颜色,优先级大于color属性 |
Android | iOS | web | |
---|---|---|---|
disabled | 3.9 | 4.11 | 4.0 |
value | 3.9 | 4.11 | 4.0 |
checked | 3.9 | 4.11 | 4.0 |
color | 3.9 | 4.11 | 4.0 |
backgroundColor | 3.9 | 4.11 | 4.0 |
borderColor | 3.9 | 4.11 | 4.0 |
activeBackgroundColor | 3.9 | 4.11 | 4.0 |
activeBorderColor | 3.9 | 4.11 | 4.0 |
iconColor | 3.9 | 4.11 | 4.0 |
Template
Script
<template>
<view class="main">
<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="checkbox_click" @touchstart="checkbox_touchstart"
@touchmove="checkbox_touchmove" @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend"
@tap="checkbox_tap" @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="当前是否选中,可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#007aff" title="checkbox的图标颜色,优先级大于color属性" type="text"
@confirm="confirm_iconColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 15px" class="checkbox cb">选中
</checkbox>
<checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
{{ wrapText }}
</checkbox>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group">
<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="checkbox">选中
</checkbox>
<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group">
<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
{{ item.name }}
</checkbox>
</checkbox-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>