<template>
|
<BaseCard :direction="direction" :borderless="borderlessDirection">
|
<template #content>
|
<el-checkbox-group
|
:model-value="modelValue"
|
size="default"
|
:min="1"
|
@update:model-value="handleChange"
|
>
|
<div :class="vertical ? 'vertical-class' : ''">
|
<el-checkbox
|
v-for="item in options"
|
:key="item.label"
|
:value="item.value"
|
>{{ item.label }}</el-checkbox
|
>
|
</div>
|
</el-checkbox-group>
|
</template>
|
</BaseCard>
|
</template>
|
|
<script>
|
// 监测因子单选框
|
import { checkboxOptions } from '@/constant/checkbox-options';
|
import { TYPE0 } from '@/constant/device-type';
|
|
export default {
|
props: {
|
// 复选框值
|
modelValue: Array,
|
deviceType: {
|
type: String,
|
// type0: 车载或无人机; type1:无人船
|
default: TYPE0
|
},
|
/**
|
*
|
* 样式朝向
|
* top-left | left
|
*/
|
direction: {
|
type: String,
|
default: 'top-left'
|
},
|
/**
|
* 无边框的方向
|
* t | r
|
*/
|
borderlessDirection: {
|
type: String,
|
default: 't'
|
},
|
/**
|
* 内容是否垂直排布
|
*/
|
vertical: Boolean,
|
// 默认选中的个数（从第一个选项开始）
|
defaultNum: {
|
type: Number,
|
default: 1
|
}
|
},
|
emits: ['update:modelValue'],
|
data() {
|
return {};
|
},
|
computed: {
|
options() {
|
return checkboxOptions(this.deviceType);
|
}
|
},
|
watch: {
|
deviceType(nV, oV) {
|
if (nV != oV) {
|
const res = [];
|
const array = checkboxOptions(nV);
|
for (let i = 0; i < this.defaultNum; i++) {
|
const e = array[i];
|
res.push(e.value);
|
}
|
this.handleChange(res);
|
}
|
}
|
},
|
methods: {
|
handleChange(value) {
|
this.$emit('update:modelValue', value);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.el-checkbox {
|
--el-checkbox-text-color: white;
|
--main-color: #23dad1;
|
--el-checkbox-checked-text-color: var(--main-color);
|
--el-checkbox-checked-input-border-color: var(--main-color);
|
--el-checkbox-checked-bg-color: var(--main-color);
|
--el-checkbox-input-border-color-hover: var(--main-color);
|
|
--el-checkbox-disabled-checked-input-fill: var(--main-color);
|
--el-checkbox-disabled-checked-input-border-color: var(--main-color);
|
--el-checkbox-disabled-checked-icon-color: white;
|
margin-right: 6px;
|
/* height: initial; */
|
}
|
|
.el-checkbox__input.is-disabled + span.el-checkbox__label {
|
color: var(--el-color-primary);
|
}
|
|
.vertical-class {
|
display: flex;
|
flex-direction: column;
|
}
|
</style>
|
