91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
|
const props = defineProps({
|
|
list:{
|
|
type:Array,
|
|
default:()=>[]
|
|
},
|
|
selected:{
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
})
|
|
const emit = defineEmits([
|
|
'update:selected','change'
|
|
])
|
|
const checkList = ref([])
|
|
const checkAll = ref(false)
|
|
|
|
watch(()=>props.selected, (newVal, oldVal) => {
|
|
if(newVal[0] === 'all' && newVal.length === 1){
|
|
checkList.value = []
|
|
checkAll.value = true
|
|
}else{
|
|
checkList.value = [...newVal]
|
|
checkAll.value = false
|
|
}
|
|
},{immediate:true})
|
|
|
|
const handleChange = (val) => {
|
|
let data = val.filter(item => item !== 'all' && props.selected?.[0] != item)
|
|
emit('update:selected', data)
|
|
emit('change', data)
|
|
}
|
|
const handleCheckAllChange = (val) => {
|
|
let data = ['all']
|
|
emit('update:selected', data)
|
|
emit('change', data)
|
|
|
|
}
|
|
let data = reactive({
|
|
})
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="all">
|
|
<el-checkbox
|
|
v-model="checkAll"
|
|
@change="handleCheckAllChange"
|
|
>
|
|
{{ $t('checked.All') }}
|
|
</el-checkbox>
|
|
</div>
|
|
<el-checkbox-group v-model="checkList" @change="handleChange">
|
|
<el-checkbox
|
|
v-for="item in props.list"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
>
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.all{
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
.el-checkbox-group{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
}
|
|
label{
|
|
--el-checkbox-font-size: 1.6rem;
|
|
--el-checkbox-checked-text-color: #232323;
|
|
--el-checkbox-font-weight: 400;
|
|
--el-checkbox-height: 2rem;
|
|
--el-checkbox-checked-bg-color: #232323;
|
|
--el-checkbox-checked-input-border-color: #232323;
|
|
--el-checkbox-input-border: 1px solid #232323;
|
|
font-family: "KaiseiOpti-Regular";
|
|
line-height: 2rem;
|
|
.el-checkbox__label{
|
|
padding-left: 1.4rem;
|
|
}
|
|
}
|
|
</style> |