快捷導(dǎo)航

vue：左右過渡展開折疊的組件

更新時間：2023年11月07日 16:24:21 作者：火星學(xué)姐

在網(wǎng)上找了好久關(guān)于左右過渡動畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個,分享給大家,感興趣的朋友參考下吧

前言：
在網(wǎng)上找了好久關(guān)于左右過渡動畫折疊的組件，沒有合適的代碼，效果類似于element UI中的Drawer抽屜組件，只不過ele中的都是懸浮的組件，工作中遇到的很多都是占用空間的展開折疊，網(wǎng)上很多也是上下展開收起的組件，于是就自己寫了一個。

1.整個應(yīng)用頁面采用彈性盒布局，左邊容器的寬度固定px，右邊容器寬度為 flex:1。

html：

<div class="current-page">
    // 引入組件
    <pack-up>
        <div>我是文字文字文字</div>
    </pack-up>
     <div class="right">
        右邊的數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)
     </div>
  </div>

css：

.current-page{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 500px;
}
.right{
  flex: 1;
}

2.關(guān)于組件

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使得被折疊的內(nèi)容不被銷毀，緩存之前的數(shù)據(jù)
也可以用font-size:0來隱藏內(nèi)容區(qū)

3.完整代碼：

父組件：

<template>
  <div class="current-page">
    <pack-up>
        <div>我是文字文字文字</div>
    </pack-up>
     <div class="right">
        右邊的數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)
     </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">
      <!-- 內(nèi)容插槽 -->
      <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>

您可能感興趣的文章: