vue3可拖拽左侧区

<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"
     >
     </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;
 }
 </style>