vue之封装一个 折叠面板

vue之封装一个 折叠面板

CollapseBread.vue

<!-- 高级搜索的 折叠面板 -->
<template>
  <div class="collapse-wrap">
    <div class="senior-search-top">
      <div class="line" />
      <div class="btn" @click="collapse = !collapse">
        高级搜索
        <i v-if="collapse" class="el-icon-arrow-down" />
        <i v-else class="el-icon-arrow-up" />
      </div>
      <div class="line" />
    </div>
    <transition name="normal-expand">
      <div v-show="collapse" style="margin-top: 6px">
        <slot />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'CollapseBread',
  components: {},
  filters: {},
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      collapse: this.isCollapse
    }
  }
}
</script>

<style lang="scss" scoped>
.collapse-wrap {
  color: #409eff;
  width: 100%;
  background: #fff;
  .senior-search-top {
    display: flex;
    justify-content: center;
    align-items: center;
    .line {
      flex: 1;
      height: 1px;
      background: #409eff;
    }
    .btn {
      width: 120px;
      text-align: center;
    }
  }
}
/* normal-expand对应的CSS代码：  */
.normal-expand-enter-active,
.normal-expand-leave-active {
  transition: all 0.4s ease;
  height: 62px !important;
}
.normal-expand-enter,
.normal-expand-leave-to {
  height: 0px !important;
}
</style>

使用组件

      <div class="senior-search">
        <CollapseBread :is-collapse="true">
          内容。。。
        </CollapseBread>
      </div>

import CollapseBread from './components/CollapseBread.vue'
  components: {
    CollapseBread,
  },

效果

• 展开
  
• 折叠