脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue展开折叠的组件

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中使用localstorage来存储页面信息

    vue中使用localstorage来存储页面信息

    这篇文章主要介绍了vue中使用localstorage来存储页面信息,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue2使用element-ui,el-table不显示,用npm安装方式

    vue2使用element-ui,el-table不显示,用npm安装方式

    这篇文章主要介绍了vue2使用element-ui,el-table不显示,用npm安装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解

    Vue数据与事件绑定以及Class和Style的绑定详细讲解

    这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • vue使用once修饰符,使事件只能触发一次问题

    vue使用once修饰符,使事件只能触发一次问题

    这篇文章主要介绍了vue使用once修饰符,使事件只能触发一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    Vue 解决通过this.$refs来获取DOM或者组件报错问题

    这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-router 权限控制的示例代码

    vue-router 权限控制的示例代码

    本篇文章主要介绍了vue-router 权限控制的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • uniapp嵌套webview无法返回上一级解决方式

    uniapp嵌套webview无法返回上一级解决方式

    uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下
    2024-05-05
  • vue+elementUI实现表格的增删改过程

    vue+elementUI实现表格的增删改过程

    文章介绍了一个使用Vue和Element UI仅在前端实现增删改功能的示例,未涉及后端知识,主要分为编辑、新增和删除方法,并提供了全部代码
    2026-03-03
  • 前端利用vue实现导入和导出功能详细代码

    前端利用vue实现导入和导出功能详细代码

    最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue前端开发辅助函数状态管理详解示例

    vue前端开发辅助函数状态管理详解示例

    vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化
    2021-10-10

最新评论