perf(collapse): 删除 collapseItem 的 show 配置, 使用 collapse openKeys 替换

docs/docs/zh-CN/components/collapse.md

@@ -1,10 +1,11 @@
 ::: demo
 
 <template>
-  <lay-collapse>
+{{openKeys}}
-    <lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
+  <lay-collapse :openKeys="openKeys">
-    <lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
+    <lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
-    <lay-collapse-item title="标题" show> 内容 </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
     }
   }
 }

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>

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
+  id: string
-  title?: 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>