From 5da80981766a67b14651e24820f00d4fed93e6f1 Mon Sep 17 00:00:00 2001
From: Jevin <cwj_8888@163.com>
Date: Fri, 25 Jul 2025 19:17:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(checkcard):=20disabled=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E6=9C=AA=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{checkcard.test.ts => checkcard.test.tsx} |  39 ++++
 .../component/component/checkcard/index.vue   | 178 +++++++++---------
 .../component/checkcard/interface.ts          |  10 +
 .../component/checkcardGroup/index.vue        |  34 ++--
 4 files changed, 148 insertions(+), 113 deletions(-)
 rename packages/component/component/checkcard/__tests__/{checkcard.test.ts => checkcard.test.tsx} (81%)
 create mode 100644 packages/component/component/checkcard/interface.ts

diff --git a/packages/component/component/checkcard/__tests__/checkcard.test.ts b/packages/component/component/checkcard/__tests__/checkcard.test.tsx
similarity index 81%
rename from packages/component/component/checkcard/__tests__/checkcard.test.ts
rename to packages/component/component/checkcard/__tests__/checkcard.test.tsx
index 7785866b..d8ffecb9 100644
--- a/packages/component/component/checkcard/__tests__/checkcard.test.ts
+++ b/packages/component/component/checkcard/__tests__/checkcard.test.tsx
@@ -6,7 +6,10 @@
  */
 import { mount, shallowMount } from "@vue/test-utils";
 import LayCheckCard from "../index.vue";
+import LayCheckcardGroup from "../../checkcardGroup/index.vue";
 import { describe, expect, test } from "vitest";
+import {ref, h, nextTick} from 'vue'
+
 const IMAGE_URL = "https://img.com";
 const title = "test checkcard text";
 const description = "test checkcard description";
@@ -136,4 +139,40 @@ describe("LayCheckCard.vue", () => {
 
     wrapper.unmount();
   });
+
+  test("disabled", async () => {
+    const disabledGroup = ref(true)
+    const disabled = ref(true)
+
+    const wrapper = mount(
+      {
+        setup() {
+          return () => (
+            <LayCheckcardGroup disabled={disabledGroup.value}>
+              <LayCheckCard title="标题" disabled={disabled.value}></LayCheckCard>
+            </LayCheckcardGroup>
+          );
+        },
+      },
+      {}
+    );
+
+    await nextTick()
+    expect(wrapper.find(".layui-checkcard").classes()).toContain(
+      "layui-checkcard-disabled"
+    );
+
+    // await wrapper.setProps({ disabled: false })
+    disabledGroup.value = false
+    await nextTick()
+    expect(wrapper.find(".layui-checkcard").classes()).toContain(
+      "layui-checkcard-disabled"
+    );
+
+    disabled.value = false
+    await nextTick()
+    expect(wrapper.find(".layui-checkcard").classes()).not.toContain(
+      "layui-checkcard-disabled"
+    );
+  });
 });
diff --git a/packages/component/component/checkcard/index.vue b/packages/component/component/checkcard/index.vue
index 53c4452c..ec954772 100644
--- a/packages/component/component/checkcard/index.vue
+++ b/packages/component/component/checkcard/index.vue
@@ -1,88 +1,37 @@
-<!--
- * @Author: baobaobao
- * @Date: 2023-04-24 16:23:33
- * @LastEditTime: 2023-05-23 13:41:46
- * @LastEditors: baobaobao
--->
-<template>
-  <div :style="containerStyle" :class="getStyle" @click="handleCheck">
-    <div class="layui-checkcard-is-cover" v-if="$slots.cover || cover">
-      <img :src="cover" v-if="cover" />
-      <slot name="cover" v-if="$slots.cover">
-        {{ cover }}
-      </slot>
-    </div>
-    <div :class="getContentStyle" v-else>
-      <div class="layui-checkcard-left" v-if="$slots.avatar || avatar">
-        <span class="layui-checkcard-avatar" v-if="avatar">
-          <img :src="avatar" />
-        </span>
-        <slot name="avatar" v-if="$slots.avatar">
-          {{ avatar }}
-        </slot>
-      </div>
-      <div class="layui-checkcard-right">
-        <div class="layui-checkcard-header" v-if="$slots.title || title">
-          <span :class="getExtraStyle">
-            <slot name="title">{{ title }}</slot>
-          </span>
-          <div class="layui-checkcard-extra" v-if="$slots.extra">
-            <slot name="extra">{{ extra }}</slot>
-          </div>
-        </div>
-        <div
-          class="layui-checkcard-desc"
-          v-if="$slots.description || description"
-        >
-          <slot name="description">{{ description }}</slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import type { CheckCard } from "./interface";
 
-<script lang="ts" setup>
 import {
-  ref,
-  watch,
   computed,
-  StyleValue,
-  useAttrs,
   inject,
+  ref,
   useSlots,
+  watch,
 } from "vue";
 import "./index.less";
-export interface CheckCard {
-  title?: string;
-  avatar?: string;
-  description?: string;
-  cover?: string;
-  extra?: string;
-  disabled?: boolean;
-  value?: string | number;
-  modelValue?: boolean;
-}
+
+export type { CheckCard };
 
 defineOptions({
   name: "LayCheckcard",
 });
 
-const attrs = useAttrs();
-const slot = useSlots();
-const emit = defineEmits(["change", "update:modelValue"]);
 const props = withDefaults(defineProps<CheckCard>(), {
   disabled: false,
   modelValue: false,
 });
+
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const slot = useSlots();
 const initValue = ref(props.modelValue);
 const checkcardGroup: any = inject("checkcardGroup", {});
 const getIsGroup = computed(
-  () => checkcardGroup && checkcardGroup.name === "LayCheckCardGroup"
-);
-const containerStyle = computed(() => attrs.style as StyleValue);
-const getDisabled = ref<boolean | undefined>(
-  props.disabled || checkcardGroup.disabled
+  () => checkcardGroup && checkcardGroup.name === "LayCheckCardGroup",
 );
+const disabledValue = computed(() => {
+  return props.disabled || checkcardGroup.disabled?.value;
+});
 const getContentStyle = computed(() => {
   return {
     "layui-checkcard-is-description": !props.description && !slot.description,
@@ -100,10 +49,12 @@ const getCheckState = computed({
     if (getIsGroup.value) {
       if (!Array.isArray(checkcardGroup.modelVal.value)) {
         return checkcardGroup.modelVal.value === props.value;
-      } else {
+      }
+      else {
         return checkcardGroup.modelVal.value.includes(props.value);
       }
-    } else {
+    }
+    else {
       return initValue.value;
     }
   },
@@ -111,10 +62,12 @@ const getCheckState = computed({
     if (getIsGroup.value) {
       if (!Array.isArray(checkcardGroup.modelVal.value)) {
         checkcardGroup.modelVal.value = props.value;
-      } else {
+      }
+      else {
         checkcardGroup.modelVal.value = getNewArr();
       }
-    } else {
+    }
+    else {
       initValue.value = val;
       emit("change", val);
       emit("update:modelValue", val);
@@ -125,43 +78,82 @@ const getValArr = computed(() => {
   if (getIsGroup.value) {
     return checkcardGroup.modelVal.value;
   }
+  return [];
 });
-const getNewArr = () => {
-  let newsArr = [...getValArr.value];
-  const findIndex = newsArr.findIndex((key) => key === props.value);
+function getNewArr() {
+  const newsArr = [...getValArr.value];
+  const findIndex = newsArr.findIndex(key => key === props.value);
   if (findIndex < 0) {
     newsArr.push(props.value);
-  } else {
+  }
+  else {
     newsArr.splice(findIndex, 1);
   }
   return newsArr;
-};
+}
 
-const handleCheck = (event: Event) => {
-  if (!getDisabled.value) {
+function handleCheck() {
+  if (!disabledValue.value) {
     getCheckState.value = !getCheckState.value;
   }
-};
-watch(
-  () => props.disabled,
-  (val) => {
-    if (!getIsGroup.value) {
-      getDisabled.value = val;
-    }
-  }
-);
+}
+
 watch(
   () => props.modelValue,
   (val) => {
     initValue.value = val;
-  }
+  },
 );
-const getStyle = computed(() => {
-  return {
-    "layui-checkcard-checked": getCheckState.value,
-    "layui-checkcard": true,
-    "layui-checkcard-bordered": true,
-    "layui-checkcard-disabled": getDisabled.value,
-  };
+
+const classes = computed(() => {
+  return [
+    "layui-checkcard",
+    "layui-checkcard-bordered",
+    {
+      "layui-checkcard-checked": getCheckState.value,
+      "layui-checkcard-disabled": disabledValue.value,
+    },
+  ];
 });
 </script>
+
+<template>
+  <div :class="classes" @click="handleCheck">
+    <div v-if="$slots.cover || cover" class="layui-checkcard-is-cover">
+      <img v-if="cover" :src="cover">
+      <slot v-if="$slots.cover" name="cover">
+        {{ cover }}
+      </slot>
+    </div>
+    <div v-else :class="getContentStyle">
+      <div v-if="$slots.avatar || avatar" class="layui-checkcard-left">
+        <span v-if="avatar" class="layui-checkcard-avatar">
+          <img :src="avatar">
+        </span>
+        <slot v-if="$slots.avatar" name="avatar">
+          {{ avatar }}
+        </slot>
+      </div>
+      <div class="layui-checkcard-right">
+        <div v-if="$slots.title || title" class="layui-checkcard-header">
+          <span :class="getExtraStyle">
+            <slot name="title">{{ title }}</slot>
+          </span>
+          <div v-if="$slots.extra" class="layui-checkcard-extra">
+            <slot name="extra">
+              {{ extra }}
+            </slot>
+          </div>
+        </div>
+        <div
+          v-if="$slots.description || description"
+          class="layui-checkcard-desc"
+        >
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/component/component/checkcard/interface.ts b/packages/component/component/checkcard/interface.ts
new file mode 100644
index 00000000..9e89d552
--- /dev/null
+++ b/packages/component/component/checkcard/interface.ts
@@ -0,0 +1,10 @@
+export interface CheckCard {
+  title?: string;
+  avatar?: string;
+  description?: string;
+  cover?: string;
+  extra?: string;
+  disabled?: boolean;
+  value?: string | number;
+  modelValue?: boolean;
+}
diff --git a/packages/component/component/checkcardGroup/index.vue b/packages/component/component/checkcardGroup/index.vue
index 8d7c2711..c5d59543 100644
--- a/packages/component/component/checkcardGroup/index.vue
+++ b/packages/component/component/checkcardGroup/index.vue
@@ -1,17 +1,5 @@
-<!--
- * @Author: baobaobao
- * @Date: 2023-04-26 13:28:17
- * @LastEditTime: 2023-05-23 13:38:22
- * @LastEditors: baobaobao
--->
-<template>
-  <div class="layui-checkcard-group">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, provide } from "vue";
+<script setup lang="ts">
+import { provide, ref, watch } from "vue";
 import "./index.less";
 
 export interface CheckCardGroup {
@@ -47,12 +35,12 @@ watch(
   {
     deep: true,
     immediate: true,
-  }
+  },
 );
 provide("checkcardGroup", {
   name: "LayCheckCardGroup",
-  modelVal: modelVal,
-  disabled: disabled,
+  modelVal,
+  disabled,
 });
 
 watch(
@@ -61,7 +49,7 @@ watch(
     emit("update:modelValue", val.value);
     emit("change", val.value);
   },
-  { deep: true }
+  { deep: true },
 );
 
 watch(
@@ -71,7 +59,7 @@ watch(
   },
   {
     deep: true,
-  }
+  },
 );
 
 watch(
@@ -81,6 +69,12 @@ watch(
   },
   {
     deep: true,
-  }
+  },
 );
 </script>
+
+<template>
+  <div class="layui-checkcard-group">
+    <slot />
+  </div>
+</template>
-- 
Gitee