vue实现左右伸缩(el-drawer自定义位置展开收缩)

实现需求

页面内容是左右布局，需求想让左侧内容可收缩，然后展示完全右侧内容。本来想着写原生的css+v-show动态判断即可，后来想到了element组件库有抽屉(el-drawer),顺便想尝试一下是否能自定义抽屉展开的位置，所以有了这篇文章。

实现效果

自定义抽屉(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

实现原理

给el-drawer父级标签添加position: relative;
el-drawer属性调整：
:append-to-body=“false” 遮罩层是否插入至 body 元素上，
:modal=“false” 是否需要遮罩层
:show-close=“false” 是否显示关闭按钮
:wrapperClosable=“false” 点击遮罩层是否可以关闭 Drawer

js方法，点击的时候抽屉伸缩展开，并且给左侧右侧内容对应的宽度

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;
      }
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以上只是尝试抽屉是否能自定义位置伸缩展开。当然有更简单的方法写个css动态判断宽度即可

第二种方法

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 methods: {
    clickImg() {
      this.drawer = !this.drawer;
    },
  },
1
2
3
4
5

.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21