You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1011 B
44 lines
1011 B
<script setup> |
|
|
|
/** |
|
* 复选框组 |
|
* @description |
|
* |
|
* @property {String} title 显示的文字 |
|
*/ |
|
import {ref, provide} from "vue"; |
|
|
|
const props = defineProps({ |
|
checkData:{type:[Object,Array],default:[]}, |
|
labelSize:{type:[String,Number],default:'26rpx'}, |
|
size:{type:[String,Number],default:'32rpx'}, |
|
activeColor:{type:String,default:'#578CF5'}, |
|
inActiveColor:{type:String,default:'transparent'}, |
|
borderInActiveColor:{type:String,default:'#999'}, |
|
labelStyle:{type:Object,default:{}} |
|
}); |
|
|
|
const emit = defineEmits(['change','update:modelValue']); |
|
const checked = ref([]); |
|
|
|
provide('checkboxGroup',{ |
|
emit:emit, |
|
checked:checked, |
|
props:props, |
|
boxStyle:boxStyle |
|
}); |
|
|
|
function boxStyle (index) { |
|
return { |
|
borderColor:(checked.value.indexOf(index) !== -1)?props.activeColor:props.unActiveColor, |
|
backgroundColor:(checked.value.indexOf(index) !== -1)?props.activeColor:'transparent' |
|
} |
|
} |
|
</script> |
|
<template> |
|
<slot></slot> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
|
|
</style>
|
|
|