From b80a9b6651994d3da3e59699c16b82bc417f1fe1 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 19 Jan 2024 20:00:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                   |  1 +
 locales/zh-CN.yaml                |  1 +
 src/router/modules/components.ts  |  8 +++
 src/views/components/collapse.vue | 86 +++++++++++++++++++++++++++++++
 4 files changed, 96 insertions(+)
 create mode 100644 src/views/components/collapse.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 797eb03f7..b529aa5da 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -62,6 +62,7 @@ menus:
   hsTimePicker: TimePicker
   hsTag: Tag
   hsStatistic: Statistic
+  hsCollapse: Collapse
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 02379836d..b7cf8a7ee 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -62,6 +62,7 @@ menus:
   hsTimePicker: 时间选择器
   hsTag: 标签
   hsStatistic: 统计组件
+  hsCollapse: 折叠面板
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 0e446ec03..f238abdb4 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -123,6 +123,14 @@ export default {
         title: $t("menus.hsStatistic")
       }
     },
+    {
+      path: "/components/collapse",
+      name: "Collapse",
+      component: () => import("@/views/components/collapse.vue"),
+      meta: {
+        title: $t("menus.hsCollapse")
+      }
+    },
     {
       path: "/components/cascader",
       name: "Cascader",
diff --git a/src/views/components/collapse.vue b/src/views/components/collapse.vue
new file mode 100644
index 000000000..856b9c1aa
--- /dev/null
+++ b/src/views/components/collapse.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "Collapse"
+});
+
+const radio = ref();
+const collapseRef = ref();
+const activeNames = ref(["1", "2", "3", "4", "5"]);
+const isOpen = ref(true);
+
+function onClick() {
+  isOpen.value
+    ? (activeNames.value = [])
+    : radio.value === "accordion"
+      ? (activeNames.value = ["5"])
+      : (activeNames.value = ["1", "2", "3", "4", "5"]);
+  isOpen.value = !isOpen.value;
+}
+
+const handleChange = (val: string[]) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/collapse.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            折叠面板
+          </el-link>
+        </el-space>
+      </div>
+    </template>
+
+    <p class="mb-2">基础用法</p>
+    <el-radio-group v-model="radio" class="mb-3">
+      <el-radio label="">可同时展开多个面板</el-radio>
+      <el-radio label="accordion">每次只能展开一个面板</el-radio>
+    </el-radio-group>
+    <el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
+      外部触发打开、关闭
+    </el-button>
+    <el-collapse
+      ref="collapseRef"
+      v-model="activeNames"
+      class="w-[360px]"
+      :accordion="radio === 'accordion' ? true : false"
+      @change="handleChange"
+    >
+      <el-collapse-item title="周一" name="1">
+        周一启航，新的篇章
+      </el-collapse-item>
+      <el-collapse-item title="周二" name="2">
+        周二律动，携手共进
+      </el-collapse-item>
+      <el-collapse-item title="周三" name="3">
+        周三昂扬，激情不减
+      </el-collapse-item>
+      <el-collapse-item title="周四" name="4">
+        周四精进，事半功倍
+      </el-collapse-item>
+      <el-collapse-item name="5">
+        <template #title>
+          周五
+          <IconifyIconOnline
+            icon="streamline-emojis:beaming-face-with-smiling-eyes"
+            class="ml-1"
+            width="30"
+          />
+        </template>
+        周五喜悦，收尾归档
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>