再项目中可能遇到左树右表的布局,左边的树如果文本太长或者子集太多,会导致显示不下,这时候有两种解决方式,一种是加横向滚动条,另一种是让左边盒子的 宽度可以拖拽。
直接上代码
<template>
<div class="out-box">
<div class="left-box" :style="{ width: `${lastX}px`}">
<div class="x-resizer" @mousedown="mouseDown"></div>
</div>
<div class="right-box">
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftBarWidth: 360,
startX: 0,
lastX: 360
}
},
mounted() {
this.getRoleList()
},
methods: {
mouseDown(e) {
this.startX = e.clientX
this.mouseMove(e)
this.mouseUp()
document.addEventListener('mousemove', this.mouseMove, { passive: false })
document.addEventListener('mouseup', this.mouseUp, { passive: false })
},
mouseUp() {
this.leftBarWidth = this.lastX
document.removeEventListener('mousemove', this.mouseMove, { passive: false })
document.removeEventListener('mouseup', this.mouseUp, { passive: false })
},
mouseMove(moveEvent) {
moveEvent.preventDefault()
moveEvent.stopPropagation()
const offset = moveEvent.clientX - this.startX
if (this.offset !== 0) {
this.lastX = offset + this.leftBarWidth
}
}
}
}
</script>
<style lang="scss" scoped>
.out-box{
display:flex;
height:100%;
.left-box {
min-width: 35px;
background: #FFFFFF;
position: relative;
.x-resizer {
position: absolute;
top: 50%;
right: -11px;
z-index: 1;
width: 25px;
height: 50px;
margin-top: -25px;
border-radius: 5px;
background-color: gray;
cursor: col-resize;
}
}
.right-box {
flex: 1;
background: #FFFFFF;
margin-left: 10px;
position: relative;
min-width: 650px;
}
}
</style>