脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 router demo详解

    vue router demo详解

    这篇文章主要为大家详细介绍了vue router demo演示代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue实现用户登录切换

    vue实现用户登录切换

    这篇文章主要为大家详细介绍了vue实现用户登录切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Vue3自定义drag指令详解

    Vue3自定义drag指令详解

    这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • uniapp微信小程序axios库的封装及使用详细教程

    uniapp微信小程序axios库的封装及使用详细教程

    这篇文章主要给大家介绍了关于uniapp微信小程序axios库的封装及使用的相关资料,Axios是一个基于promise网络请求库,作用于node.js和浏览器中axios-miniprogram-adapteraxios的小程序适配器,需要的朋友可以参考下
    2023-08-08
  • vue封装一个弹幕组件详解

    vue封装一个弹幕组件详解

    这篇文章主要介绍了vue封装一个弹幕组件详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙可以参考一下
    2022-08-08
  • element表格组件实现右键菜单的功能

    element表格组件实现右键菜单的功能

    本文主要介绍了element表格组件实现右键菜单的功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3使用elementPlus进行table合并处理的示例详解

    vue3使用elementPlus进行table合并处理的示例详解

    虚拟数据中公司下有多个客户,公司一样的客户,公司列需要合并,客户如果一样也需要合并进行展示,所以本文给大家介绍了vue3使用elementPlus进行table合并处理的实例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • Vue+mui实现图片的本地缓存示例代码

    Vue+mui实现图片的本地缓存示例代码

    这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue 解决数组赋值无法渲染在页面的问题

    vue 解决数组赋值无法渲染在页面的问题

    今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了vue.js开发环境的搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论