新增新版本。静安区特供版

riku

2024-08-23 1788c96aea9247cc36ef8b82734997f1a6a92fb4

 src/components/monitor/FactorCheckbox.vue

@@ -1,17 +1,20 @@
<template>
  <BaseCard direction="top-left" borderless="t">
  <BaseCard :direction="direction" :borderless="borderlessDirection">
    <template #content>
      <el-checkbox-group
        v-model="checkbox"
        :model-value="modelValue"
        size="default"
        @change="handleChange"
        :min="1"
        @update:model-value="handleChange"
      >
        <el-checkbox
          v-for="(item, i) in options"
          :key="i"
          :value="item.value"
          >{{ item.label }}</el-checkbox
        >
        <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>
@@ -24,17 +27,43 @@

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: ['change'],
  emits: ['update:modelValue'],
  data() {
    return {
      checkbox: [checkboxOptions(TYPE0)[0].value]
    };
    return {};
  },
  computed: {
    options() {
@@ -44,13 +73,19 @@
  watch: {
    deviceType(nV, oV) {
      if (nV != oV) {
        this.checkbox = this.options[0].value;
        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('change', value);
      this.$emit('update:modelValue', value);
    }
  }
};
@@ -58,7 +93,25 @@
<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>