vue.js实现简易折叠面板
作者:曲小强 时间:2024-05-08 09:33:47
本文实例为大家分享了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>
来源:https://blog.csdn.net/quhongqiang/article/details/116591091
标签:vue.js,折叠面板
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
利用django如何解析用户上传的excel文件
2022-04-04 04:45:20
公用样式模板的设计制作
2009-09-13 21:27:00
![](https://img.aspxhome.com/file/UploadPic/20099/13/sys1-12s.jpg)
ubuntu20.04配置mysql8.0的实现步骤
2024-01-28 14:56:16
![](https://img.aspxhome.com/file/2023/6/89936_0s.png)
Django 对IP访问频率进行限制的例子
2022-02-14 05:40:38
使用Keras预训练模型ResNet50进行图像分类方式
2022-04-02 22:57:21
js实现向右横向滑出的二级菜单效果
2024-04-17 10:34:44
![](https://img.aspxhome.com/file/2023/9/136229_0s.jpg)
python PyTorch参数初始化和Finetune
2023-04-26 08:53:44
![](https://img.aspxhome.com/file/2023/4/75934_0s.png)
详解Python多线程Selenium跨浏览器测试
2023-05-05 08:10:11
![](https://img.aspxhome.com/file/2023/8/115608_0s.png)
详解python读取matlab数据(.mat文件)
2021-03-04 19:29:29
![](https://img.aspxhome.com/file/2023/1/89331_0s.png)
PHP导出数据超时的优化建议
2023-06-29 18:36:32
tensorflow 动态获取 BatchSzie 的大小实例
2023-03-05 16:56:48
![](https://img.aspxhome.com/file/2023/8/81518_0s.jpg)
Oracle中判断字段是否为数字
2024-01-13 13:00:13
Python最基本的数据类型以及对元组的介绍
2022-03-26 07:04:07
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021-11-20 16:32:07
![](https://img.aspxhome.com/file/2023/4/135414_0s.png)
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2023-09-03 10:55:07
![](https://img.aspxhome.com/file/2023/0/56080_0s.gif)
ASP.NET(C#)读取Excel的文件内容
2023-07-10 22:38:35
MySql数据库之alter表的SQL语句集合
2024-01-21 05:31:24
Python 私有化操作实例分析
2022-11-06 05:44:42
![](https://img.aspxhome.com/file/2023/9/69049_0s.png)
css样式表使用技巧小结
2008-01-11 20:44:00
解决SQL Server日志文件损坏严重的问题
2009-02-05 15:55:00