vue：左右过渡展开折叠的组件
更新时间：2023年11月07日 16:24:21 作者：火星学姐
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于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>相关文章
这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue项目中添加单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧2018-10-10
在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下2021-09-09
使用vue/cli出现defineConfig is not function错误解决办法
这篇文章主要给大家介绍了关于使用vue/cli出现defineConfig is not function错误的解决办法,当我们在做打包配置的时候,出现了这个错误,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了基于Vue和Element-Ui搭建项目的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于如何利用vue+Minio实现多文件进度上传的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识，有兴趣的朋友们参考学习下吧。2017-12-12
最新评论