开发指南100-左右区域可拖动

       平台上大量这样的界面：左侧机构树，右侧详细情况列表。要求两个区域中间有分割条，点击分割条可以左右拖动变动。平台标准实现方法如下：

      页面元素：

       <div class="treeContainer" ref="treeContainer"></div>    --这是左侧区域

       <el-divider ref="divider" direction="vertical" @mousedown="startDrag"></el-divider>  --分割条

       <div class="list" ref="list"></div>  --这是右侧区域

       所需变量:

            // 处理拖动所属变量
            isResizing: false,  //是否拖动状态
            startX: 0,         //起点坐标
            startWidth: 0,     //左侧宽度 

        函数处理逻辑:

        startDrag(e) {
            this.isResizing = true;
            this.startX = e.clientX;
            this.startWidth = this.$refs.treeContainer.offsetWidth;
            document.addEventListener('mousemove', this.onMouseMove);
            document.addEventListener('mouseup', this.stopResize);
        },

              onMouseMove(e) {
            if (this.isResizing) {
                const dx = e.clientX - this.startX;
                const newWidth = this.startWidth + dx;
                    this.$refs.treeContainer.style.width = `${newWidth}px`;
                    this.$refs.list.style.width = `calc(100% - ${newWidth}px - 5px)`;
            }
        },
        stopResize() {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.onMouseMove);
            document.removeEventListener('mouseup', this.stopResize);
        },