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.
60 lines
1.7 KiB
60 lines
1.7 KiB
<script setup> |
|
/** |
|
* 复选框 |
|
* @description |
|
* |
|
* @property {String} title 显示的文字 |
|
*/ |
|
import {ref, watch} from "vue"; |
|
|
|
const props = defineProps({ |
|
checkData:{type:Object,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([]); |
|
function checkedHandle(item,index){ |
|
const posIndex = checked.value.indexOf(index) |
|
if(posIndex !== -1){ |
|
checked.value.splice(posIndex,1); |
|
}else{ |
|
checked.value.push(index) |
|
} |
|
emit('update:modelValue',(posIndex === -1)); |
|
emit('change',{ele:item,checked:(posIndex === -1)}); |
|
} |
|
</script> |
|
<template> |
|
<view class="m-checkbox-group"> |
|
<view class="m-checkbox"> |
|
<view class="item row align-center" v-for="(item,index) in checkData" @click="checkedHandle(item,index)"> |
|
<view class="box border-box mr-1" :style="{borderColor:(checked.indexOf(index) !== -1)?activeColor:borderInActiveColor}"> |
|
<view class="icon" :style="{backgroundColor:(checked.indexOf(index) !== -1)?activeColor:inActiveColor}"></view> |
|
</view> |
|
<view class="label"><m-text :text="item.label" :size="labelStyle.size" :line-height="labelStyle.lingHeight" :color="labelStyle.color"></m-text></view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.box{ |
|
width:32rpx; |
|
height:32rpx; |
|
padding:5rpx; |
|
border-radius:50%; |
|
border:3rpx solid; |
|
.icon{ |
|
width:100%; |
|
height:100%; |
|
border-radius:50%; |
|
background:transparent; |
|
} |
|
} |
|
</style>
|
|
|