vue：左右过渡展开折叠的组件
作者：火星学姐
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于element UI中的Drawer抽屉组件,只不过ele中的都是悬浮的组件,工作中遇到的很多都是占用空间的展开折叠,网上很多也是上下展开收起的组件,于是就自己写了一个,分享给大家,感兴趣的朋友参考下吧
前言：
在网上找了好久关于左右过渡动画折叠的组件，没有合适的代码，效果类似于element UI中的Drawer抽屉组件，只不过ele中的都是悬浮的组件，工作中遇到的很多都是占用空间的展开折叠，网上很多也是上下展开收起的组件，于是就自己写了一个。
1.整个应用页面采用弹性盒布局，左边容器的宽度固定px，右边容器宽度为 flex:1。
html：
<div class="current-page">
// 引入组件
<pack-up>
<div>我是文字文字文字</div>
</pack-up>
<div class="right">
右边的数据数据数据数据
</div>
</div>css：
.current-page{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 500px;
}
.right{
flex: 1;
}2.关于组件
html：
.current-page{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 500px;
}
.right{
flex: 1;
}css：
.curr-contents{
width: 500px;
height: 100%;
position: relative;
background: lightpink;
transition: all .5s ease-in-out;
padding: 0 10px;
/* transition: height .3s; */
}
.curr-contents .pack-ups{
height: 100%;
background: lightcyan;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .5s ease-in-out;
}
.show-areas{
transition: all .5s ease-in-out;
}核心js代码：
// 点击展开 折叠
handlePack(){
this.openflags=!this.openflags
const liCon = this.$refs.outerDiv
let packUps=this.$refs.packUps
if (this.openflags) { // 展开
liCon.style.width = 'auto'
liCon.style.width = this.liConWidth + 'px'
packUps.style.position='absolute'
packUps.style.left='auto'
packUps.style.right='0'
} else { // 收起
liCon.style.width = 0 + 'px'
packUps.style.position='absolute'
packUps.style.right='auto'
packUps.style.left='0'
}
}利用v-show使得被折叠的内容不被销毁，缓存之前的数据
也可以用font-size:0来隐藏内容区
3.完整代码：
父组件：
<template>
<div class="current-page">
<pack-up>
<div>我是文字文字文字</div>
</pack-up>
<div class="right">
右边的数据数据数据数据
</div>
</div>
</template>
<script>
import packUp from "./component/packUp"
export default {
name:'',
components:{ packUp },
data(){
return{}
},
mounted(){},
methods:{}
}
</script>
<style scoped>
.current-page{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 500px;
}
.right{
flex: 1;
}
</style>子组件：
<template>
<div class="curr-contents" ref="outerDiv">
<div class="show-areas" v-show="openflags">
<!-- 内容插槽 -->
<slot></slot>
</div>
<div class="pack-ups" ref="packUps" @click="handlePack">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</template>
<script>
export default {
name:'',
data() {
return {
liConWidth:500, // 左边容器的宽度
openflags:true,
}
},
methods: {
// 点击展开 折叠
handlePack(){
this.openflags=!this.openflags
const liCon = this.$refs.outerDiv
let packUps=this.$refs.packUps
if (this.openflags) { // 展开
liCon.style.width = 'auto'
liCon.style.width = this.liConWidth + 'px'
packUps.style.position='absolute'
packUps.style.left='auto'
packUps.style.right='0'
} else { // 收起
liCon.style.width = 0 + 'px'
packUps.style.position='absolute'
packUps.style.right='auto'
packUps.style.left='0'
}
}
}
}
</script>
<style scoped>
.curr-contents{
width: 500px;
height: 100%;
position: relative;
background: lightpink;
transition: all .5s ease-in-out;
padding: 0 10px;
/* transition: height .3s; */
}
.curr-contents .pack-ups{
height: 100%;
background: lightcyan;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all .5s ease-in-out;
}
.show-areas{
transition: all .5s ease-in-out;
}
</style>