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.
61 lines
1.7 KiB
61 lines
1.7 KiB
1 year ago
|
<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>
|