简易折叠面板

代码如下：

主文件：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.openthis.nameSync = this.name ? this.name : this.collapse.childrens.lengththis.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.isOpenthis.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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！