vue.js实现简易折叠面板
程序员文章站
2022-03-07 08:18:04
本文实例为大家分享了vue.js实现简易折叠面板的具体代码，供大家参考，具体内容如下代码如下：主文件：app.vue
...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 绵阳有哪些美食比较出名
下一篇： html div边框线怎么设置