这篇文章主要介绍“vue.js怎么实现简易折叠面板”，在日常操作中，相信很多人在vue.js怎么实现简易折叠面板问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue.js怎么实现简易折叠面板”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
具体内容如下
代码如下：
主文件：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" :> <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>到此，关于“vue.js怎么实现简易折叠面板”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
