展示效果图：

父

<template><div ref="topBox" class="swiper-in page-container bg-white"><div class="page-body"><drag-box class="drag-box"><div class="relative" :class="{'expend-border':!slideStateX}" :style="{'width': slideStateX? '350px' : '35px'}" ref="sliderLeft"><drag-item v-show="slideStateX">123</drag-item><div v-if="expendX" :class="slideStateX?'close-box-button-x':'open-box-button-x'" @click="slideStateX = !slideStateX"></div><div v-show="!slideStateX" class="arrow-content text-gray-500">展开侧边栏</div></div><drag-item class="w-4/5 flex-col-box" :resizeShow="false" ref="sliderRight"><div class="flex-auto flex-col-box">123123</div></drag-item></drag-box></div></div>
</template><script>
import { dragBox, dragItem } from '@/components/common/dragLayouter'
export default {components: {dragBox,dragItem},data() {return {expendX: true,slideStateX: true}},watch: {},created(){},methods:{}
}
</script><style scoped>
@import '../../assets/css/basicPageTemplate/basicPageTemplate.css';
.topbox {padding: 1rem;border-bottom: 1px solid #ccc;
}
</style>

子1

<template><div ref="container" class="d-flex"><slot>默认信息</slot><!-- 拖拽条 --><div v-if="resizeShow" class="resize"/></div>
</template><script>export default {name: 'dragItem',props: {// 控制拖拽条的是否显示，默认显示resizeShow: {type: Boolean,default: true}}}
</script><style>.d-flex {min-width: 100px;height: 100%;position: relative;}.resize {position: absolute;top: 0;right: 0;width: 4px;height: 100%;cursor: col-resize;background: #e6e6e6;}
</style>

子2

<template><div ref='dragBox' class="dragBox"><slot></slot></div>
</template><script>export default {name: 'dragBox',data() {return {}},mounted() {this.setDragItemFlex()this.dragControllerDiv()},methods: {// 如果dragItem 没有定义宽度，则flex=1setDragItemFlex() {const dragBox = this.$refs.dragBoxconst childsLen = dragBox.children.lengthfor (let i = 0; i < childsLen; i++) {const node = dragBox.children[i]if (!node.style.width) {// 如果没有定义宽度，则flex=1node.style.flex = 1}}},dragControllerDiv() {const resize = document.getElementsByClassName('resize') // 拖拽条// 循环为每个拖拽条添加事件for (let i = 0; i < resize.length; i++) {// 鼠标按下事件resize[i].addEventListener('mousedown', this.onMouseDown)}},onMouseDown(e) {this.resizeBox = e.targetthis.currentBox = this.resizeBox.parentNode.parentNode// 当前盒子this.rightBox = this.getNextElement(this.currentBox)// 当前盒子的下个兄弟节点if (!this.rightBox) {return}this.curLen = this.currentBox.clientWidththis.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的宽度// 颜色改变提醒// this.resizeBox.style.background = '#818181'this.startX = e.clientXdocument.addEventListener('mousemove', this.onMousemove)document.addEventListener('mouseup', this.onMouseup)},// 获取下一个兄弟元素的兼容函数getNextElement(element) {if (element.nextElementSibling) {return element.nextElementSibling} else {let next = element.nextSibling// 下一个兄弟节点while (next && next.nodeType !== 1) { // 有 并且 不是我想要的next = next.nextSibling}return next}},onMousemove(e) {const endX = e.clientXconst moveLen = endX - this.startX // （endx-startx）= 移动的距离const CurBoxLen = this.curLen + moveLen // resize[i].left+移动的距离=左边区域最后的宽度const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右侧宽度=总宽度-左侧宽度-其它盒子宽度// 当最小宽度时，无法继续拖动if (CurBoxLen <= 100 || rightBoxLen <= 100) {return}this.currentBox.style.width = CurBoxLen + 'px'// 当前盒子的宽度this.resizeBox.style.left = CurBoxLen // 设置左侧区域的宽度this.rightBox.style.width = rightBoxLen + 'px'},onMouseup() {// 颜色恢复//  this.resizeBox.style.background = '#d6d6d6'document.removeEventListener('mousedown', this.onMouseDown)document.removeEventListener('mousemove', this.onMousemove)}}}
</script><style scoped>.dragBox {width: 100%;height: 100%;display: flex;}
</style>

// 公共样式
/* 展开字体样式 */
.arrow-content {@apply text-base w-4 my-0 mx-auto pt-24
}/* 底部分页footer 样式 */.bottom-footer {@apply w-full flex items-center justify-between
}