vue.js实现简易折叠面板
作者：曲小强
这篇文章主要为大家详细介绍了JavaScript实现简易折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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" :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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。