Vue implementa escalado hacia izquierda y derecha (expansión y contracción de posición personalizada del cajón)

Realizar requisitos

El contenido de la página está organizado de izquierda a derecha. Debe hacer que el contenido del lado izquierdo se pueda reducir y luego mostrar todo el contenido en el lado derecho. Originalmente pensé en escribir juicio dinámico nativo css + v-show, pero luego pensé que la biblioteca de componentes de elementos tiene un cajón (el-drawer). Por cierto, quería probar si puedo personalizar la posición de expansión del cajón, así que Se me ocurrió este artículo.

lograr efecto

Personaliza la posición de expansión del cajón (el-drawer)

<template>
  <div>
  	<el-row style="margin-top: 1%" :gutter="20">
      <!-- 左侧 列表 -->
      <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>左侧内容</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>
      <!-- 右侧 用户列表 -->
      <el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
        <el-card class="box-card">
          <div>右侧内容</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

Principio de implementación

Agregar posición: relativa a la etiqueta principal de el-drawer;
ajuste del atributo el-drawer:
:append-to-body="false" Si la capa de máscara se inserta en el elemento del cuerpo,
:modal="false" Si la capa de máscara se inserta en el elemento del cuerpo requerido
: show-close="false" Si se debe mostrar el botón de cerrar
: wrapperClosable="false" Si el cajón se puede cerrar haciendo clic en la capa de máscara

js, cuando se hace clic, el cajón se expande y se expande, y se proporciona el ancho correspondiente al contenido de la izquierda y la derecha.

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>

Lo anterior es solo para probar si el cajón se puede expandir y expandir en una posición personalizada. Por supuesto, existe una forma más sencilla de escribir CSS para determinar dinámicamente el ancho.

El segundo método

    <el-row style="margin-top: 1%">
      
      <div style="display: flex; align-items: center">
         <!-- 左侧 列表 -->
        <div :class="[drawer ? 'left' : 'left1']">
          <el-card class="box-card">
            <div>左侧内容</div>
          </el-card>
        </div>
         <!-- 折叠展开图片-->
        <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>
           <!-- 右侧 用户列表 -->
        <div :class="[drawer ? 'right' : 'right1']">
          <el-card class="box-card">
            <div>右侧内容</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;
}