vue.js怎么实现简易折叠面板

这篇文章主要介绍“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怎么实现简易折叠面板”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！