简易折叠面板

代码如下：

主文件：app.vue

<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>