走航融合模块完成

feiyu02

2025-03-28 aa75a9d46ee325f0a92e42f733aabb1f92103aeb

 src/components/common/CheckButton.vue

@@ -4,17 +4,33 @@
    {{ checkValue ? activeText : inactiveText }}
  </el-button> -->
  <el-checkbox
    v-model="checkValue"
    ref="checkboxRef"
    :disabled="loading"
    :model-value="modelValue"
    @update:model-value="(e) => emits('update:modelValue', e)"
    @change="handleChange"
    border
    size="small"
    >{{ activeText }}</el-checkbox
  >
    <template #default>
      <el-space>
        <el-icon v-if="loading" class="is-loading" color="#00fff2"><Loading /></el-icon>
        {{ activeText }}
      </el-space>
    </template>
  </el-checkbox>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
// import $ from 'jquery';

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  loading: {
    type: Boolean
  },
  defaultValue: {
    type: Boolean
  },
@@ -28,8 +44,9 @@
  }
});

const emits = defineEmits(['change']);
const emits = defineEmits(['change', 'update:modelValue']);

const checkboxRef = ref();
const checkValue = ref(false);

watch(
@@ -42,6 +59,44 @@
  { immediate: true }
);

watch(
  () => props.loading,
  (nV, oV) => {
    if (nV != oV) {
      // setTimeout(() => {
      //   const e1 = checkboxRef.value.$el.querySelector('.el-checkbox__input');
      //   console.log(e1);

      //   // e1.classList.toggle('is-disabled');
      //   e1.classList.toggle('checkbox__input_none');
      //   const e2 = checkboxRef.value.$el.querySelector('.el-checkbox__label');
      //   console.log(e2);
      //   e2.classList.toggle('checkbox__label_nopadding');
      // }, 500);

      // if (props.id) {
      //   console.log(
      //     checkboxRef.value.$el.querySelector('.el-checkbox__input').classList
      //   );
      //   console.log(
      //     checkboxRef.value.$el.querySelector('.el-checkbox__label').classList
      //   );
      // }
    }
  }
);

onMounted(() => {
  if (props.id) {
    console.log(
      checkboxRef.value.$el.querySelector('.el-checkbox__input').classList
    );
    console.log(
      checkboxRef.value.$el.querySelector('.el-checkbox__label').classList
    );
  }
});

function handleChange(value) {
  emits('change', value);
}
@@ -49,6 +104,7 @@
<style scoped>
.el-checkbox {
  --el-checkbox-text-color: white;
  /*--main-color: #00fff2;*/
  --main-color: #23dad1;
  --el-checkbox-checked-text-color: var(--main-color);
  --el-checkbox-checked-input-border-color: var(--main-color);
@@ -65,4 +121,12 @@
.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: var(--el-color-primary);
}

:deep(.checkbox__input_none) {
  display: none !important;
}

:deep(.checkbox__label_nopadding) {
  padding-left: 0px;
}
</style>