From b4b8f9a71d9545ba3aa731bdcd38ce621c438c61 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Tue, 6 May 2025 22:07:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DCollapse=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6modelValue=E5=8F=97=E6=8E=A7=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/collapse/OCollapse.vue     | 24 ++++++-----
 .../src/collapse/__demo__/ControlledComp.vue  | 41 +++++++++++++++++++
 .../src/collapse/__demo__/TheIndex.vue        |  2 +
 3 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 packages/opendesign/src/collapse/__demo__/ControlledComp.vue

diff --git a/packages/opendesign/src/collapse/OCollapse.vue b/packages/opendesign/src/collapse/OCollapse.vue
index 6e95c792..3b645cba 100644
--- a/packages/opendesign/src/collapse/OCollapse.vue
+++ b/packages/opendesign/src/collapse/OCollapse.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, toRef, watch } from 'vue';
+import { provide, ref, toRef, computed } from 'vue';
 import { collapseProps } from './types';
 import { collapseInjectKey } from './provide';
 import { isArray } from '../_utils/is';
@@ -11,20 +11,24 @@ const emits = defineEmits<{
   (e: 'change', val: Array<string | number>, ev: Event): void;
 }>();
 
-const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
-
-watch(
-  () => props.modelValue,
-  (val) => {
+const innerValue = ref(isArray(props.modelValue) ? props.modelValue : isArray(props.defaultValue) ? props.defaultValue : []);
+const realValue = computed({
+  get() {
+    // 受控模式，优先使用外部传入的 modelValue
+    const val = props.modelValue ?? innerValue.value;
     if (isArray(val)) {
-      realValue.value = val;
+      return val;
     }
-  }
-);
+    return [];
+  },
+  set(val) {
+    innerValue.value = val;
+    emits('update:modelValue', val);
+  },
+});
 
 const updateModelValue = (val: Array<string | number>) => {
   realValue.value = val;
-  emits('update:modelValue', val);
 };
 
 const onChange = (val: Array<string | number>, ev: Event) => {
diff --git a/packages/opendesign/src/collapse/__demo__/ControlledComp.vue b/packages/opendesign/src/collapse/__demo__/ControlledComp.vue
new file mode 100644
index 00000000..18a36bde
--- /dev/null
+++ b/packages/opendesign/src/collapse/__demo__/ControlledComp.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCollapse, OCollapseItem } from '../index';
+const val = ref([1]);
+const handleUpdate = (newVal: any[]) => {
+  if (newVal.length === 0) {
+    // 必须有一个手风琴展开
+    return;
+  }
+  val.value = newVal;
+};
+</script>
+
+<template>
+  <h4>受控组件：手动处理update:model-value 实现必须有一个手风琴展开的效果</h4>
+  <section>
+    <OCollapse :model-value="val" accordion @update:model-value="handleUpdate">
+      <OCollapseItem title="这是标题1" :value="1">
+        <div class="content1"></div>
+      </OCollapseItem>
+      <OCollapseItem title="2" :value="2">
+        <div class="content2"></div>
+      </OCollapseItem>
+    </OCollapse>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  display: block;
+}
+
+.content1 {
+  height: 200px;
+  background-color: peachpuff;
+}
+.content2 {
+  height: 150px;
+  background-color: yellowgreen;
+}
+</style>
diff --git a/packages/opendesign/src/collapse/__demo__/TheIndex.vue b/packages/opendesign/src/collapse/__demo__/TheIndex.vue
index e2f39908..597fa15f 100644
--- a/packages/opendesign/src/collapse/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/collapse/__demo__/TheIndex.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import '../style';
 import CollapseBasic from './CollapseBasic.vue';
+import ControlledComp from './ControlledComp.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <CollapseBasic />
+    <ControlledComp />
   </div>
 </template>
-- 
Gitee