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><divclass="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.movementXif (asideWidth.value < 20) {document.onmouseup()asideWidth.value = 0}}document.onmouseup = function () {document.onmousemove = nulldocument.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>