vue實(shí)現(xiàn)左右伸縮方式(el-drawer自定義位置展開(kāi)收縮)

更新時(shí)間：2024年07月24日 11:39:32 作者：wangjiecsdn

這篇文章主要介紹了vue實(shí)現(xiàn)左右伸縮方式(el-drawer自定義位置展開(kāi)收縮),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

實(shí)現(xiàn)需求

頁(yè)面內(nèi)容是左右布局，需求想讓左側(cè)內(nèi)容可收縮，然后展示完全右側(cè)內(nèi)容。

本來(lái)想著寫原生的css+v-show動(dòng)態(tài)判斷即可，后來(lái)想到了element組件庫(kù)有抽屜(el-drawer),順便想嘗試一下是否能自定義抽屜展開(kāi)的位置，所以有了這篇文章。

實(shí)現(xiàn)效果

自定義抽屜(el-drawer)展開(kāi)位置

<template>
  <div>
  	<el-row style="margin-top: 1%" :gutter="20">
      <!-- 左側(cè) 列表 -->
      <el-col style="height: 350px;" :span="span" :class="[span != '8' ? 'span1' : 'span1']">
        <div style="position: relative; width: 100%; height: 100%">
          <el-drawer
            class="drawerClass"
            style="position: absolute"
            :append-to-body="false"
            :modal="false"
            :show-close="false"
            :wrapperClosable="false"
            size="100%"
            :visible.sync="drawer"
            direction="ltr"
          >
            <el-card class="box-card" style="position: relative">
              <div>左側(cè)內(nèi)容</div>
            </el-card>
          </el-drawer>
          <div
            style="
              position: absolute;
              z-index: 999999999;
              cursor: pointer;
              top: 30%;
            "
            :class="[drawer ? 'imgright' : 'imgright1']"
            @click="clickImg"
          >
            <img
              v-show="!drawer"
              style="height: 40px; width: 25px"
              :src="require('@/assets/image/zhankai.png')"
              alt=""
            />
            <img
              v-show="drawer"
              style="height: 40px; width: 25px"
              :src="require('@/assets/image/shousuo.png')"
              alt=""
            />
          </div>
        </div>
      </el-col>
      <!-- 右側(cè) 用戶列表 -->
      <el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
        <el-card class="box-card">
          <div>右側(cè)內(nèi)容</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

實(shí)現(xiàn)原理

給el-drawer父級(jí)標(biāo)簽添加position: relative;

el-drawer屬性調(diào)整：

:append-to-body=“false” 遮罩層是否插入至 body 元素上，
:modal=“false” 是否需要遮罩層
:show-close=“false” 是否顯示關(guān)閉按鈕
:wrapperClosable=“false” 點(diǎn)擊遮罩層是否可以關(guān)閉 Drawer

js方法，點(diǎn)擊的時(shí)候抽屜伸縮展開(kāi)

并且給左側(cè)右側(cè)內(nèi)容對(duì)應(yīng)的寬度

export default {
  data() {
    return {
      span: 8,
      span1: 15,
      drawer: true,
    };
  },
  methods: {
    clickImg() {
      this.drawer = !this.drawer;
      if (this.drawer) {
        this.span = 8;
        this.span1 = 15;
      } else {
        this.span = 1;
        this.span1 = 23;
      }
    },
  },
};

<style lang="scss" scoped>
.span1 {
  transition: all 0.2s;
}
.imgright {
  right: 0;
  background-color: #f5f5f5;
  transition: all 0.2s;
}
.imgright1 {
  left: 0;
  background-color: #fff;
  transition: all 0.2s;
}
.drawerClass ::v-deep .el-drawer__container .el-drawer .el-drawer__header {
  display: none;
}
</style>

以上只是嘗試抽屜是否能自定義位置伸縮展開(kāi)。當(dāng)然有更簡(jiǎn)單的方法寫個(gè)css動(dòng)態(tài)判斷寬度即可

第二種方法

    <el-row style="margin-top: 1%">
      
      <div style="display: flex; align-items: center">
         <!-- 左側(cè) 列表 -->
        <div :class="[drawer ? 'left' : 'left1']">
          <el-card class="box-card">
            <div>左側(cè)內(nèi)容</div>
          </el-card>
        </div>
         <!-- 折疊展開(kāi)圖片-->
        <div
          style="cursor: pointer; width: 5%"
          :class="[drawer ? 'imgright' : 'imgright1']"
          @click="clickImg"
        >
          <img
            v-show="!drawer"
            style="height: 40px; width: 25px"
            :src="require('@/assets/image/zhankai.png')"
          />
          <img
            v-show="drawer"
            style="height: 40px; width: 25px"
            :src="require('@/assets/image/shousuo.png')"
          />
        </div>
           <!-- 右側(cè) 用戶列表 -->
        <div :class="[drawer ? 'right' : 'right1']">
          <el-card class="box-card">
            <div>右側(cè)內(nèi)容</div>
          </el-card>
        </div>
      </div>
    </el-row>

 methods: {
    clickImg() {
      this.drawer = !this.drawer;
    },
  },

.left {
  width: 35%;
  transition: all 0.2s;
}
.left1 {
  width: 0%;
  transition: all 0.2s;
}
.right {
  width: 65%;
  transition: all 0.2s;
}
.right1 {
  width: 95%;
  transition: all 0.2s;
}
.box-card {
  height: 350px;
  background-color: #ff6e6e;
}