feat: 添加折叠面板组件示例

This commit is contained in:
xiaoxian521 2024-01-19 20:00:02 +08:00
parent 0d6362db73
commit b80a9b6651
4 changed files with 96 additions and 0 deletions

View File

@ -62,6 +62,7 @@ menus:
hsTimePicker: TimePicker
hsTag: Tag
hsStatistic: Statistic
hsCollapse: Collapse
hsmenus: MultiLevel Menu
hsmenu1: Menu1
hsmenu1-1: Menu1-1

View File

@ -62,6 +62,7 @@ menus:
hsTimePicker: 时间选择器
hsTag: 标签
hsStatistic: 统计组件
hsCollapse: 折叠面板
hsmenus: 多级菜单
hsmenu1: 菜单1
hsmenu1-1: 菜单1-1

View File

@ -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",

View File

@ -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>