<template>
<div>
<div id="css">
<h3>折叠面板demo</h3>
<div v-for="(item, i) in list" :key="i">
<div class="title">
<h4>{{ item.name }}</h4>
<template v-if="item.showContent">
<span class="btn" @click="btn(i,item.showContent)"> 收起 </span>
</template>
<template v-else>
<span class="btn" @click="btn(i,item.showContent)"> 展开 </span>
</template>
</div>
<!--v-show配合标签的隐藏和显示-->
<transition name="slide-fade">
<div class="container" v-show="item.showContent">
<p>{{ item.detail }}</p>
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: "芙蓉楼送辛渐",
detail: "寒雨连江夜入吴",
showContent: false,
},
{
name: "芙蓉楼送辛渐1",
detail: "寒雨连江夜入吴2",
showContent: false,
},
],
};
},
mounted() {},
methods: {
btn(index,showContents) {
// var temp = this.list
// temp[index].showContent = !temp[index].showContent
// this.list = temp
this.list = this.list.map((item, i) => {
if (index == i) {
return {
...item,
showContent: !showContents,
};
} else {
return {
...item,
showContent: false,
};
}
});
},
},
};
</script>
<style lang="scss" scoped>
#css {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
margin-top: 15px;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
margin-bottom: 15px;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
}
</style>
vue 列表展开折叠过渡
最新推荐文章于 2024-04-05 15:26:59 发布