element的折叠面板Collapse组件的二次封装

一、封装Collapse组件

新建 Collapse.vue文件，放在vue项目的components文件夹下

<template>
  <div class="collapse-container">
    <el-collapse accordion v-model="activeNames" @change="handleCollapseChange">
      <el-collapse-item name="collapsePanel">
        <template slot="title">
          <i class="search el-icon-fa-search"></i>
          <span class="search">搜索</span>
        </template>
        <slot />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  computed: {
    activeNames: {
      // collapse的默认展开与否,arrs中的路由，默认为展开状态
      get() {
        const arrs = ["/default", "/attr"];
        if (arrs.includes(this.$route.path)) {
          return "collapsePanel";
        } else {
          return "";
        }
      },
      set() {}
    }
  },
  methods: {
    handleCollapseChange(val) {
      this.$emit("handleCollapseChange", val);
    }
  }
};
</script>
<style lang="scss">
.collapse-container {
  .search {
    color: $icon_color;
    font-size: 15px;
    font-weight: 600;
    margin-left: 10px;
  }
  .el-collapse-item__header {
    height: 35px;
    line-height: 35px;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
}
</style>

二、使用刚刚封装的组件

<template>
     // 3. 使用组件
     <div>
      <comn-collapse @handleCollapseChange="handleCollapseChange">
          <div> 这里根据不同情况，放置了不同情况的表单</div>
       </comn-collapse>
       </div>
 </template>
 <script>
 import comnCollapse from "@/components/Collapse.vue"; // 1. 局部引入组件，根据情况定，是否全局引入
 export default {
	components:{
		comnCollapse  // 2. 注册组件
	},
	data(){
	return {
		collapsePanel:"",  // 它有值，代表此时折叠面板处于展开状态
	}
	},
  methods: {
	 handleCollapseChange(val) {
       this.collapsePanel = val;
   	  }
	}
 }
</script>

应用情况如下（项目中的页面设计，在多处有类似的情况）：