Vue3封装一个左侧可拖拽折叠的侧边栏布局

功能

1、点击左侧侧边栏可折叠或打开
2、左侧侧边栏可拖拽

代码

<template>
  <div class="fold-left-box">
    <div class="fold-left-box-left" :style="{ width: asideWidth + 'px' }" v-show="asideWidth > 0">
      left
    </div>
    <div
      class="fold-left-box-line"
      :style="{ cursor: asideWidth === 0 ? '' : 'col-resize' }"
      ref="drag"
    >
      <el-button size="mini" circle class="fold-left-box-line-button" @click="foldLeft">{{
        asideWidth === 0 ? '开' : '关'
      }}</el-button>
    </div>
    <div class="fold-left-box-main">main</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
onMounted(() => {
  bindDrop()
})
function foldLeft() {
  asideWidth.value = asideWidth.value === 0 ? 250 : 0
}
const drag = ref(null)
const asideWidth = ref(300)
function bindDrop() {
  drag.value.onmousedown = function () {
    document.onmousemove = function (e) {
      asideWidth.value = asideWidth.value + e.movementX
      if (asideWidth.value < 20) {
        document.onmouseup()
        asideWidth.value = 0
      }
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
    return false
  }
}
</script>
<style scoped>
.fold-left-box {
  height: 500px;
  overflow: hidden;
  display: flex;
}
.fold-left-box-left {
  height: 100%;
  overflow: hidden;
}
.fold-left-box-line {
  width: 4px;
  height: 100%;
  position: relative;
  border-left: 1px solid #e6e6e6;
}
.fold-left-box-main {
  height: 100%;
  flex: 1;
  padding-left: 12px;
  overflow: hidden;
}
.fold-left-box-line-button {
  position: absolute;
  top: 50%;
  right: -10px;
}
</style>

效果图

链接: Vue封装一个左侧可拖拽折叠的侧边栏布局