首先利用递归对vant 的折叠面板组件进行封装:
封装组件代码
// 封装组件 CurMenu.vue
<template>
<div class="cur-menu">
<van-collapse v-model="data.activeID" class="collapse-item" accordion>
<template v-for="item in data">
<van-collapse-item
:title="item.title"
:name="item.id"
:key="item.id"
class="coll-item"
v-if="item.children"
>
<template #title v-if="deep != 1">
<div class="title-item">{{ item.title }}</div>
</template>
<cur-menu
:data="item.children"
:deep="deep + 1"
:activeID="item.activeID"
></cur-menu>
</van-collapse-item>
<template v-else>
<van-cell :title="item.title" :key="item.id" is-link>
<template #title>
<van-tag type="primary" :plain="!item.learned">
{{ item.res_type }}
</van-tag>
<span class="custom-title">{{ item.title }}</span>
</template>
</van-cell>
</template>
</template>
</van-collapse>
</div>
</template>
<script>
export default {
name: "CurMenu",
props: ["data", "deep", "activeID"],
data() {
return {};
},
mounted() {},
methods: {}
};
</script>
<style scoped>
.title-item {
border-left: 2px solid #409eff;
padding-left: 5px;
}
.custom-title {
margin-right: 4px;
vertical-align: middle;
}
</style>
<style>
.collapse-item .van-collapse-item--border::after {
border: none !important;
}
.coll-item .van-cell::after {
border: none !important;
}
</style>
组件中调用
//test.vue 组件
<template>
<div class="test">
<cur-menu :data="subjectList" :deep="1" :activeID="activeID"></cur-menu>
</div>
</template>
<script>
import CurMenu from "@/views/Study/CurMenu";
export default {
name: "test",
components: {
CurMenu
},
data() {
return {
subjectList: [
{
id: "1",
title: "计算机基础知识",
activeID: "",
children: [
{
id: "1.1",
title: "了解计算机",
activeID: "",
children: [
{
id: "1.1.1",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.1.1 计算机的产生和发展",
learned: true
},
{
id: "1.1.2",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.1.2 计算机的特点及分类",
learned: true
},
{
id: "1.1.3",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.1.3 计算机的应用领域",
learned: false
}
]
},
{
id: "1.2",
title: "计算机的系统组成",
activeID: "",
children: [
{
id: "1.2.1",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.2.1 计算机的工作原理及基本结构",
learned: false
},
{
id: "1.2.2",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.2.2 微型计算机的硬件系统之微处理器",
learned: false
},
{
id: "1.2.3",
pro_id: 1,
res_type: "pdf",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "1.2.3 微型计算机的硬件系统之主板",
learned: false
}
]
}
]
},
{
id: "2",
title: "计算机网络",
activeID: "",
children: [
{
id: "2.1",
title: "任务1 搜索信息与在线交流",
activeID: "",
children: [
{
id: "2.1.1",
pro_id: 1,
res_type: "视频",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "2.1.1 任务1 搜索信息与在线交流",
learned: false
}
]
},
{
id: "2.2",
title: "网络基础知识",
activeID: "",
children: [
{
id: "2.2.1",
pro_id: 1,
res_type: "视频",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "2.2.1 计算机网络的定义及功能",
learned: false
},
{
id: "2.2.1",
pro_id: 1,
res_type: "视频",
res_url: "http://view.xdocin.com/file-icve-com-cn_u5abek.htm",
title: "2.2.2 计算机网络的分类",
learned: false
}
]
}
]
},
{
id: "3",
pro_id: 1,
res_type: "视频",
res_url:
"https://file.icve.com.cn/doc_gens4/211/11/34F02CEE1A5DD71AC29845249CA1C3A2.mp4/480p.mp4",
title: "3.1 Window10 基本操作",
learned: false
}
],
activeID: ""
};
},
mounted() {},
methods: {}
};
</script>
<style scoped></style>
Comments | NOTHING