From aa75a9d46ee325f0a92e42f733aabb1f92103aeb Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期五, 28 三月 2025 17:44:29 +0800
Subject: [PATCH] 走航融合模块完成
---
src/components/common/CheckButton.vue | 70 +++++++++++++++++++++++++++++++++-
1 files changed, 67 insertions(+), 3 deletions(-)
diff --git a/src/components/common/CheckButton.vue b/src/components/common/CheckButton.vue
index b7e06bb..c2d6715 100644
--- a/src/components/common/CheckButton.vue
+++ b/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>
--
Gitblit v1.9.3