Vue.js学习笔记（四）组件递归封装——无限级折叠面板

封装无限级折叠面板

---

前言

由于vant 2 组件的折叠面板原有的样式和操作二次封装不符合我的需求（反正我没写出来），因此手写一个可以无限级展开的折叠面板，特此记录学习封装递归组件。

---

一、递归组件是什么？

其实递归组件就是自己反复调用自己。

二、案例

代码如下（示例）：使用技术栈vue 2 + 组件库 vant 2

1.布局和样式

主要使用栅格布局，不使用组件库的话自己用div写也可。

<template>
  <div class="collspseBox">
    <van-row class="collspse_item" v-for="(item, index) in  data " :key="index" @click.stop="open(item, index)">
      <van-col span="21" class="title">{{ item.name }}</van-col>
      <van-col span="3" class="icon"><van-icon :name="item.active ? 'arrow-down' : 'arrow'" color="#878D99" /></van-col>
      <van-col span="24" class="content" v-if="item.children && item.children.length > 0"
        :style="{ height: item.active ? 'auto' : '0' }">
        <RecursiveCollapse :data="item.children" />
      </van-col>
    </van-row>
  </div>
</template>

样式使用scss预处理器，按项目需求更换。

<style lang="scss" scoped>
.collspseBox {
  padding: 14px 10px;

  .collspse_item {
    background-color: #fff;
    padding: 15px 12px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0px 6px rgba(100, 101, 102, 0.1);

    .icon {
      text-align: right;
    }

    .title {
      font-size: 16px;
      color: #2F3541;
      white-space: nowrap;
      text-wrap: nowrap;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
      font-family: "PingFang SC";
    }

    .content {
      transition: all .5s;

      .collspseBox {
        padding: 0;

        .collspse_item {
          padding: 16px 0 0 12px;
          margin-bottom: 0;
          box-shadow: none;

          .title {
            font-size: 14px;
            color: #2F3541;
            font-family: "PingFang SC";
            font-weight: 400;
            position: relative;
            padding-left: 5px;
          }

          .title::before {
            content: '';
            position: absolute;
            top: calc(50% - 1px);
            left: 0;
            width: 2px;
            height: 2px;
            background-color: #2F3541;
            border-radius: 2px;
          }
        }
      }
    }
  }

}

</style>

2.实例操作

代码如下（示例）：

<script>
export default {
  name: "RecursiveCollapse",
   /** 需要传进来的参数 */
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeNames: ['1'],
      active: false,
    };
  },
  components: {
  },
  methods: {
    open(item, index) {
      /** 有下一级则继续展开，否则跳转详情 */
      if (item.children && item.children.length > 0) {
        /** 给当前 item 增加一个状态 */
        this.$set(this.data[index], 'active', !this.data[index].active);
      } else {
       /** 这里的逻辑按需求修改 */
        this.$router.push('/subjectTwo/' + item.id );
      }

    }
  }
};
</script>

3.引用组件

<template>
<div>
<RecursiveCollapse v-if="data" :data="data.menus" />
</div>
</template>
<script>
 /** 导入组件 */
import RecursiveCollapse from "@/components/RecursiveCollapse";
export default {
  name: "SubjectOne",
   /** 导入组件 */
  components: {
    RecursiveCollapse
  },
  data() {
    return {
      data:[]
    }
  },
}
</script>

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了递归组件的基本实现，仅供学习参考。