更新记录
1.0.0(2026-01-07)
下载此版本
master
平台兼容性
uni-app(4.13)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
- |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
安装
在市场导入xf-checkbox-groupuni_modules版本的即可,无需import
组件关联说明
代码演示
基本用法
<template>
<view class="xf-full main">
<scroll-view class="scroll xf-col-center xf-full-height" scroll-y>
<xf-checkbox-group :list="list" v-model="selectedItems" @change=""></xf-checkbox-group>
</scroll-view>
</view>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const selectedItems = ref<any[]>([])
const change = (e) => {
console.log(e)
}
const list = ref([
{
label: 'xxxx',
value: 1,
},
{
label: '好多好多字好多好多字好多好多字好多好多字好多好多字',
value: 2
},
{
label: 'sssss',
value: 3
},
{
label: 'fffff',
value: 4
},
{
label: 'sdfadfsdf',
value: 5
},
{
label: 'fsdfsdf',
value: 6
},
{
label: 'sfadfsf',
value: 7
},
]);
</script>
<style lang="scss" scoped>
.main {}
</style>
API
Props
| 属性名 |
说明 |
类型 |
默认值 |
| v-model:modelValue |
当前选中的数据 |
array |
- |
| valueKey |
列表对象value值对应的key |
string |
value |
| labelKey |
列表对象label值对应的key |
string |
label |
| list |
对象列表 |
array |
- |
Emits
| 事件名 |
说明 |
返回值 |
| change |
选中后回调事件 |
id数组列表 |
| itemChange |
单个对象状态变化 |
获取当前操作的对象,是否被选中 |