vue中的可拖拽宽度div的实现示例_vue.js

<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>