From 16934254ab524a8eff8b53499a7b4627fc3bc2f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 12 Oct 2021 12:58:17 +0800
Subject: [PATCH] =?UTF-8?q?perf(collapse):=20=E5=88=A0=E9=99=A4=20collapse?=
 =?UTF-8?q?Item=20=E7=9A=84=20show=20=E9=85=8D=E7=BD=AE,=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20collapse=20openKeys=20=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/collapse.md | 12 ++++++++----
 src/module/collapse/index.vue          | 19 ++++++++++++++++++-
 src/module/collapseItem/index.vue      | 15 +++++++++++----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/docs/docs/zh-CN/components/collapse.md b/docs/docs/zh-CN/components/collapse.md
index 9cf02231..42dc569d 100644
--- a/docs/docs/zh-CN/components/collapse.md
+++ b/docs/docs/zh-CN/components/collapse.md
@@ -1,10 +1,11 @@
 ::: demo
 
 <template>
-  <lay-collapse>
-    <lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
-    <lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
-    <lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
+{{openKeys}}
+  <lay-collapse :openKeys="openKeys">
+    <lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
+    <lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
+    <lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
   </lay-collapse>
 </template>
 
@@ -14,7 +15,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const openKeys = ref(["1","2"])
+
     return {
+      openKeys
     }
   }
 }
diff --git a/src/module/collapse/index.vue b/src/module/collapse/index.vue
index 844391a1..22736341 100644
--- a/src/module/collapse/index.vue
+++ b/src/module/collapse/index.vue
@@ -4,4 +4,21 @@
   </div>
 </template>
 
-<script setup name="LayCollapse" lang="ts"></script>
+<script setup name="LayCollapse"></script>
+<script setup lang="ts">
+import { withDefaults, defineProps, provide } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    openKeys: string[]
+  }>(),
+  {
+    openKeys: function () {
+      return []
+    },
+  }
+)
+
+provide("openKeys",props.openKeys)
+
+</script>
diff --git a/src/module/collapseItem/index.vue b/src/module/collapseItem/index.vue
index 32d1bbba..24dd304a 100644
--- a/src/module/collapseItem/index.vue
+++ b/src/module/collapseItem/index.vue
@@ -13,16 +13,23 @@
 </template>
 
 <script setup name="LayCollapseItem" lang="ts">
-import { defineProps, Ref, ref } from 'vue'
+import { defineProps, inject, Ref, ref } from 'vue'
 
 const props = defineProps<{
-  show?: boolean
-  title?: string
+  id: string
+  title: string
 }>()
 
-const isShow = ref(props.show) as Ref
+const openKeys = inject("openKeys") as String[]
+
+const isShow = ref(openKeys.includes(props.id))
 
 const showHandle = function () {
   isShow.value = !isShow.value
+  if(openKeys.indexOf(props.id) != -1) {
+    openKeys.splice(openKeys.indexOf(props.id),1)
+  } else {
+    openKeys.push(props.id)
+  }
 }
 </script>