<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '测试',
},
}
</route>
<template>
<QueryList :list-data="mockListData">
<template #default="{ listData }">
<wd-checkbox-group :modelValue="curValue" @change="onChange" cell shape="square">
<wd-checkbox
v-for="option in listData"
:modelValue="option.value"
:key="option.value"
shape="square"
>
<view>{{ option.label }} {{ option.value }}</view>
</wd-checkbox>
</wd-checkbox-group>
</template>
</QueryList>
</template>
<script lang="ts" setup>
import QueryList from './components/queryList.vue'
const curValue = ref([])
const onChange = ({ value }) => {
console.log('onChange value', value)
curValue.value = value
}
const mockListData = ref([
{ label: '测试1', value: 1 },
{ label: '测试2', value: 2 },
{ label: '测试3', value: 3 },
{ label: '测试4', value: 4 },
])
</script>
<style lang="scss" scoped>
//
</style>
querylist.vue
<template>
<view>
<slot :listData="listData"></slot>
</view>
</template>
<script lang="ts" setup>
defineProps({
listData: {
type: Array,
default: () => [],
},
})
</script>
<style lang="scss" scoped>
//
</style>