脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 监听元素前后变化值实例

    Vue 监听元素前后变化值实例

    这篇文章主要介绍了Vue 监听元素前后变化值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue自定义开发滑动图片验证组件

    vue自定义开发滑动图片验证组件

    这篇文章主要为大家详细介绍了vue自定义开发滑动图片验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue如何使用原生高德地图你知道吗

    vue如何使用原生高德地图你知道吗

    这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • 浅谈vue的几种绑定变量的值 防止其改变的方法

    浅谈vue的几种绑定变量的值 防止其改变的方法

    下面小编就为大家分享一篇浅谈vue的几种绑定变量的值 防止其改变的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js 上传图片实例代码

    vue.js 上传图片实例代码

    这篇文章主要介绍了vue.js 上传图片实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中拆分组件的实战案例

    vue中拆分组件的实战案例

    最近在学vue,试着写个单页应用,在写组件,拆分组件时遇到一些困惑,下面这篇文章主要给大家介绍了关于vue中拆分组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue的自定义指令传参方式

    vue的自定义指令传参方式

    这篇文章主要介绍了vue的自定义指令传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    这篇文章主要介绍了vue.js学习笔记:如何加载本地json文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。
    2017-01-01
  • vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不推荐)

    vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不

    当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行，这篇文章主要介绍了vue中v-if和v-for一起使用的弊端及解决办法,需要的朋友可以参考下
    2023-07-07

最新评论