vue.js實現簡易折疊面板

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <collpase>
      <collpase-item
        :title="item.name"
        :showAnimation="true"
        v-for="(item, i) in chapterList"
        :key="i"
      >
        <div class="list" v-for="(it, index) in item.list" :key="index">
          {{it.name}}
        </div>
      </collpase-item>
    </collpase>
  </div>
</template>

<script>
import Collpase from './components/Collpase.vue';
import CollpaseItem from './components/CollpaseItem.vue'

export default {
  name: 'App',
  data() {
    return {
      chapterList: [
        {
          name: '標題一',
          list: [
            {
              name: '是是是是是是所'
            },
            {
              name: '啊啊啊啊'
            }
          ]
        },
        {
          name: '標題二',
          list: [
            {
              name: '是是是是是是所'
            },
            {
              name: '啊啊啊啊'
            },
            {
              name: '啊啊啊啊'
            }
          ]
        }
      ]
    }
  },
  components: {
    Collpase,
    CollpaseItem,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
 <div class="collapse">
  <slot />
 </div>
</template>
<script>
 export default {
  name: 'Collapse',
  props: {
   accordion: {
    type: [Boolean, String],
    default: false
   }
  },
  provide() {
   return {
    collapse: this
   }
  },
  created() {
   this.childrens = []
  },
  methods: {
   onChange() {
    let activeItem = []
    this.childrens.forEach((vm) => {
     if (vm.isOpen) {
      activeItem.push(vm.nameSync)
     }
    })
    this.$emit('change', activeItem)
   }
  }
 }
</script>
<style lang="css" scoped>
 .collapse {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
 }
</style>

<template>
 <div>
    <div :class="{ 'collapse-disabled': disabled,'collapse-cell--notdisabled': !disabled, 'collapse-cell--open': isOpen,'collapse-cell--hide':!isOpen }" class="collapse-cell">
      <div :class="{ 'collapse-disabled': disabled}" class="collapse-cell__title"  @click="onClick">
        <span class="collapse-cell__title-text">{{ title }}</span>
        <img :class="{ 'active': isOpen, 'active-animation': showAnimation === true }" class="title-arrow" src="https://static-mumway.oss-cn-zhangjiakou.aliyuncs.com/NetworkFrontEnd/wsj/yslbq/btn_dropdown.png"/>
      </div>
      <div :class="{'collapse-cell__content--hide':!isOpen}" class="collapse-cell__content">
        <div :class="{ 'active-animation': showAnimation === true }" class="collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
  name: 'UniCollapseItem',
  props: {
   title: {
    // 列表標題
    type: String,
    default: ''
   },
   name: {
    // 唯一標識符
    type: [Number, String],
    default: 0
   },
   disabled: {
    // 是否禁用
    type: Boolean,
    default: false
   },
   showAnimation: {
    // 是否顯示動畫
    type: Boolean,
    default: false
   },
   open: {
    // 是否展開
    type: Boolean,
    default: false
   },
   thumb: {
    // 縮略圖
    type: String,
    default: ''
   }
  },
  data() {
   return {
    isOpen: false
   }
  },
  watch: {
   open(val) {
    this.isOpen = val
   }
  },
  inject: ['collapse'],
  created() {
   this.isOpen = this.open
   this.nameSync = this.name ? this.name : this.collapse.childrens.length
   this.collapse.childrens.push(this)
   if (String(this.collapse.accordion) === 'true') {
    if (this.isOpen) {
     let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
     if (lastEl) {
      this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
     }
    }
   }
  },
  methods: {
   onClick() {
    if (this.disabled) {
     return
    }
    if (String(this.collapse.accordion) === 'true') {
     this.collapse.childrens.forEach(vm => {
      if (vm === this) {
       return
      }
      vm.isOpen = false
     })
    }
    this.isOpen = !this.isOpen
    this.collapse.onChange && this.collapse.onChange()
    this.$forceUpdate()
   }
  }
 }
</script>

<style lang="css" scoped>
 .collapse-cell {
  flex-direction: column;
  border-color: #f0f0f0;
  border-bottom-width: 1px;
 }
 .collapse-cell--open {
  background-color: #fff;
 }
 .collapse-disabled {
  cursor: not-allowed !important;
 }
 .collapse-cell--hide {
  height: 48px;
 }
 .active-animation {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
 }

 .collapse-cell__title {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 20px;
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  line-height: 44px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
 }
 .collapse-cell__title-img {
  margin-right: 10px;
 }
 .title-arrow {
  width: 22px;
  height: 14px;
 }
 .active {
  transform: rotate(180deg);
 }
 .collapse-cell__title-text {
  flex: 1;
  font-size: 16px;
  margin-right: 16px;
  white-space: nowrap;
  color: #333333;
    font-weight: bold;
  lines: 1;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .collapse-cell__content {
  overflow-x: hidden;
 }
 .collapse-cell__wrapper {
  display: flex;
  flex-direction: column;
 }
 .collapse-cell__content--hide {
  height: 0px;
  line-height: 0px;
 }
</style>