简体中文
简体中文
# checkbox-group
组件类型：UniCheckboxGroupElement
多项组，内部由多个checkbox组成
# # 属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| @change | (event: CheckboxGroupChangeEvent) => void | - | checkbox-group中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
# # 事件
# # CheckboxGroupChangeEvent
# # 构造函数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| value | Array<string> | 是 | - | - |
# # CheckboxGroupChangeEvent 属性值
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| detail | CheckboxGroupChangeEventDetail | 是 | - | - |
| type | string | 是 | - | 事件类型 |
| target | Element | 是 | - | 触发事件的组件 |
| currentTarget | Element | 是 | - | 当前组件 |
| timeStamp | number | 是 | - | 事件发生时的时间戳 |
# # CheckboxGroupChangeEventDetail 属性值
| 名称 | 类型 | 必备 | 默认值 | 描述 |
|---|---|---|---|---|
| ctors | Constructor | 是 | - | - |
| value | Array<string> | 是 | - | - |
# # CheckboxGroupChangeEvent 方法
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
# # 兼容性
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x | |
|---|---|---|---|---|---|---|
| checkbox-group | 5.0 | √ | √ | 10.0 | √ | x |
| @change | 5.0 | √ | √ | 10.0 | √ | x |
# # 子组件
# # 参见
# checkbox
组件类型：UniCheckboxElement
多选项。在1组check-group中可选择多个
# # 属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| disabled | boolean | false | 是否禁用 |
| value | string | - | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value |
| checked | boolean | false | 当前是否选中，可用来设置默认选中 |
| color | string.ColorString | #007aff | checkbox的颜色 |
| backgroundColor | string.ColorString | #ffffff | checkbox默认的背景颜色 |
| borderColor | string.ColorString | #d1d1d1 | checkbox默认的边框颜色 |
| activeBackgroundColor | string.ColorString | #ffffff | checkbox选中时的背景颜色 |
| activeBorderColor | string.ColorString | #d1d1d1 | checkbox选中时的边框颜色 |
| iconColor | string.ColorString | #007aff | checkbox的图标颜色，优先级大于color属性 |
# # 示例
<script>
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff"
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</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>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="content nvue">
<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: 30rpx"
class="checkbox cb"
>选中
</checkbox>
<checkbox
value="cb1"
style="margin-right: 30rpx"
class="checkbox cb1"
>{{ text }}</checkbox
>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
>禁用</checkbox
>
<checkbox
value="cb3"
style="margin-top: 20rpx"
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: 30rpx"
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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
# # 兼容性
| 安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x | |
|---|---|---|---|---|---|---|
| checkbox | 5.0 | √ | √ | 10.0 | √ | x |
| disabled | 5.0 | √ | √ | 10.0 | √ | x |
| value | 5.0 | √ | √ | 10.0 | √ | x |
| checked | 5.0 | √ | √ | 10.0 | √ | x |
| color | 5.0 | √ | √ | 10.0 | √ | x |
| backgroundColor | 5.0 | x | √ | 10.0 | x | x |
| borderColor | 5.0 | x | √ | 10.0 | x | x |
| activeBackgroundColor | 5.0 | x | √ | 10.0 | x | x |
| activeBorderColor | 5.0 | x | √ | 10.0 | x | x |
| iconColor | 5.0 | x | √ | 10.0 | x | x |
