本文主要是介绍vue.js实现手风琴效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果如图，标题可定制，自定义内容区，默认打开项可以配置，主要利用了vuejs父子组件中的uid来实现，打开一个，关闭其他的，主要实现代码如下：
// collapse.vue<template><div class="collapse-parent"><slot></slot></div>
</template>
<script>
export default {methods: {close (childId) {this.$children.forEach(child => {if (child._uid !== childId) {child.show = false}})}}
}
</script>// collapseItem.vue
<template><div class="collapse-son"><div class="title" @click="change"><span class="ttl-icon" :class="show ? 'ttl-icon-left'"></span><slot name="title"></slot></div><div v-show="show"><slot name="content"></slot></div></div>
</template><style lang="scss">
.title {position: relative;display: flex;align-items: center;// justify-content: space-between;// padding: 0.3rem 0.4rem 0.3rem 0.4rem;@include pxToPx(font-size, 28);color: $font-txt-light;background: $bg-gray-lest;.ttl-icon {display: inline-block;width: 0.37rem;height: 0.2rem;background: url(~@/assets/dw_arrow.png) no-repeat center;background-size: contain;margin-right: 0.2rem;margin-left: 0.1rem;}.ttl-icon-left {width: 0.2rem;height: 0.37rem;background: url(~@/assets/dl_arrow.png) no-repeat center;background-size: contain;}.ttl-member {margin-right: 0.2rem;}
}
.arrow-bottom::before {content: '';display: inline-block;width: 0.37rem;height: 0.2rem;background: url(~@/assets/dw_arrow.png) no-repeat center;background-size: contain;margin-right: 0.2rem;margin-left: 0.1rem;
}
.arrow-left::before {content: '';display: inline-block;width: 0.2rem;height: 0.37rem;background: url(~@/assets/dl_arrow.png) no-repeat center;background-size: contain;margin-right: 0.2rem;margin-left: 0.1rem;
}
</style>
<script>
export default {props: {isOpened: {type: Boolean,default: false}},data () {return {show: this.isOpened}},methods: {change () {// console.log(this._uid)this.$parent.close(this._uid)this.show = !this.show}}
}
</script>
这篇关于vue.js实现手风琴效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
