<template>
? <div class="container" id="content_box">
? ? <div class="tab">左侧tab</div>
? ? <div class="menu" ref="menu">
? ? ? 左侧菜单
? ? ? <div class="menu-resize" ref="menuresize"></div>
? ? </div>
? ? <div class="content">
? ? ? 中心区域
? ? ? <div class="opera" ref="opera">
? ? ? ? <div class="opera-resize" ref="operaresize"></div>
? ? ? ? 操作区域
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? name: "dropwidth",
? mounted() {
? ? this.$nexttick(() => {
? ? ? this.dropsize();
? ? })
? },
? methods: {
? ? dropsize() {
? ? ? let that = this,
? ? ? ? ? menuwidth = 200,
? ? ? ? ? operaheight = 200;
? ? ? this.$refs.menuresize.onmousedown = function () {
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? let clientx = e.clientx;
? ? ? ? ? // 最大宽度
? ? ? ? ? if(clientx>=330){
? ? ? ? ? ? clientx = 330;
? ? ? ? ? }
? ? ? ? ? // 最小宽度
? ? ? ? ? if(clientx<=230){
? ? ? ? ? ? clientx = 230;
? ? ? ? ? }
? ? ? ? ? // todo 这里减的是最左侧tab的宽度
? ? ? ? ? menuwidth = clientx - 30;
? ? ? ? ? that.$refs.menu.style.width = clientx - 30 +"px";
? ? ? ? }

? ? ? ? document.onmouseup = function () {
? ? ? ? ? console.log('当前宽度', menuwidth);
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? ? that.releasecapture && that.releasecapture()
? ? ? ? }
? ? ? }

? ? ? this.$refs.operaresize.onmousedown = function () {
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? let clienty = e.clienty;
? ? ? ? ? console.log(clienty)
? ? ? ? ? // 最大宽度
? ? ? ? ? if(clienty<=100){
? ? ? ? ? ? clienty = 100;
? ? ? ? ? }
? ? ? ? ? // 最小宽度
? ? ? ? ? if(clienty>=300){
? ? ? ? ? ? clienty = 300;
? ? ? ? ? }
? ? ? ? ? operaheight = clienty;
? ? ? ? ? // todo 这里需要取反向
? ? ? ? ? that.$refs.opera.style.height = 400 - clienty +"px";
? ? ? ? }

? ? ? ? document.onmouseup = function () {
? ? ? ? ? console.log('当前宽度', operaheight);
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? ? that.releasecapture && that.releasecapture()
? ? ? ? }
? ? ? }
? ? }
? }
}
</script>

<style scoped>
.container {
? width: 1000px;
? height: 400px;
? border: 2px solid #dddddd;

? display: flex;
? justify-content: center;
}

.tab {
? width: 30px;
? height: 100%;
? background-color: #ec8c32;

? flex-shrink: 0;
? flex-grow: 0;
}

.menu {
? width: 200px;
? background-color: #aab6e0;

? flex-shrink: 0;
? flex-grow: 0;
? position: relative;
}

.content {
? width: 100%;
? position: relative;
}

.opera {
? width: 100%;
? height: 200px;
? position: absolute;
? bottom: 0;
? background-color: #f2be25;
}

.menu-resize {
? width: 5px;
? height: 100%;

? position: absolute;
? top: 0;
? right: 0;
? cursor: col-resize;
}

.opera-resize {
? width: 100%;
? height: 5px;
? position: absolute;
? top: 0;
? left: 0;
? cursor: row-resize;
}
</style>