Vue 封装vant 折叠面板,实现课程列表


首先利用递归对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>

最终效果


声明:张先生的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue 封装vant 折叠面板,实现课程列表


选择自己所爱的,然后爱自己所选择的!