mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-30 09:24:46 +08:00
feat: 添加折叠面板组件示例
This commit is contained in:
parent
0d6362db73
commit
b80a9b6651
@ -62,6 +62,7 @@ menus:
|
||||
hsTimePicker: TimePicker
|
||||
hsTag: Tag
|
||||
hsStatistic: Statistic
|
||||
hsCollapse: Collapse
|
||||
hsmenus: MultiLevel Menu
|
||||
hsmenu1: Menu1
|
||||
hsmenu1-1: Menu1-1
|
||||
|
@ -62,6 +62,7 @@ menus:
|
||||
hsTimePicker: 时间选择器
|
||||
hsTag: 标签
|
||||
hsStatistic: 统计组件
|
||||
hsCollapse: 折叠面板
|
||||
hsmenus: 多级菜单
|
||||
hsmenu1: 菜单1
|
||||
hsmenu1-1: 菜单1-1
|
||||
|
@ -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",
|
||||
|
86
src/views/components/collapse.vue
Normal file
86
src/views/components/collapse.vue
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user