目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果,但是并没有一个最小或者最大宽度的限制,导致直接将左右子div压扁。
蓝色虚线是当鼠标移上去的时候,显示的拖拽线
大多数博客的拖拽
这种拖拽会将左div或者右div直接压扁,但是我肯定不想做成这样子,我想左div有最大和最小宽度限制,然后右div是自适应宽度
我实现的拖拽
左最小宽度,我设置的300px
左最大宽度,我设置的600px
代码如下
<template>
<div class="company-manager">
<div class="left">
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-save">
左侧的内容,左侧的内容,左侧的内容,左侧的内容
</div>
</div>
<div class="right">
右侧的内容,右侧的内容,右侧的内容,右侧的内容
</div>
</div>
</template>
<style scoped lang='scss'>
.company-manager {
display: flex;
overflow: hidden;
.left {
height: 400px;
background-color: #fff;
position: relative;
.resize-save {
position: absolute;
top: 0;
right: 5px;
bottom: 0;
left: 0;
padding: 16px;
overflow-x: hidden;
}
.resize-bar {
height: inherit;
resize: horizontal;
opacity: 0;
cursor: ew-resize;
width: 300px;
min-width: 300px; /* 最小宽度 300px */
max-width: 600px; /* 最大宽度 600px */
overflow: scroll;
}
.resize-line {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-right: 2px solid #eee;
border-left: 1px solid #bbb;
pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
width: 300px;
height: inherit;
}
}
.right {
height: 400px;
padding: 16px;
flex: 1 1 auto;
background-color: #eee;
box-sizing: border-box;
overflow: hidden;
}
}
</style>