通过鼠标移动来调解两个盒子的宽度(相应式)

DOM结构：

2. <div class="courer">  // 外层盒子
3.       <div  class="dividing-line" title="拖动"></div>  // 拖动的那个线
4.       <div class="course-title-box">  // 第一个盒子
5.         <div class="course-content-box" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
6.          
7.           <div v-for="(item2, i2) in detialList" :key="i2" @contextmenu="handleRightClick(i2, item2)">
8.             <!--标题-->
9.             <div class="course-content-item" @click="currentChange(item2)">
10.               <div style="width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
11.               
12.                 {{ item2.name }}
13.               </div>
14.             </div>
15.           </div>
16.          
17.           <div v-if="noMore" style="color: #999; font-size: 12px; text-align: center; margin: 10px 0">没有更多了</div>
18.         </div>
19.       </div>
20.       <div class="course-detail-content-box" style="display: flex; align-items: center; justify-content: center">// 第二个盒子
21.         <div style="color: #bdbdbd">
22.           <span>点击任务标题查看详情</span>
23.         </div>
24.       </div>
25.       
26.     </div>

复制代码

css样式：

2. .courer {
3.   /* padding: 20px; */
4.   width: calc(100% - 150px);
5.   height: 100%;
6.   overflow-y: auto;
7.   overflow-x: hidden;
8.   display: flex;
9.   position: relative;
10. }
11. .dividing-line {
12.   position: absolute;
13.   width: 10px;
14.   height: 100%;
15.   left: 200px;
16.   top: 0;
17.   transform: translate(-50%, 0);
18.   cursor: col-resize;
19.   /* background-color: rgba(20, 20, 23, 0.3); */
20.   background-color: transparent;
21. }
23. .course-title-box {
24.   width: 200px;
25.   height: 100%;
26.   overflow-y: auto;
27.   overflow-x: hidden;
28.   /* background-color: #789; */
29.   border-right: 1px solid rgba(0, 0, 0, 0.07);
30.   border-top: 1px solid rgba(0, 0, 0, 0.07);
31.   padding: 5px 15px;
33.   .course-title-item {
34.     cursor: pointer;
35.     padding: 10px 0;
36.     color: #333;
37.     font-weight: 700;
38.     /* background-color: #669; */
39.     position: relative;
41.     &:hover {
42.       color: #5fa4f6;
44.       .el-icon-more-outline {
45.         display: block;
46.       }
47.     }
49.     .el-icon-more-outline {
50.       display: none;
51.     }
53.     span {
54.       padding: 0 7px;
55.     }
57.     .add {
58.       position: absolute;
59.       right: 5px;
60.       top: 13px;
61.     }
62.   }
64.   .course-content-box {
65.     .course-content-item {
66.       color: #333;
67.       cursor: pointer;
68.       padding: 10px;
69.       /* background-color: #898; */
70.       border-bottom: 1px solid rgba(0, 0, 0, 0.03);
71.       position: relative;
73.       &:hover {
74.         background-color: #e7f3ff;
75.       }
77.       .detail-box {
78.         position: absolute;
79.         right: 13px;
80.         top: 0;
81.         height: 40px;
82.         display: flex;
83.         align-items: center;
85.         .more-icon:hover {
86.           color: #5fa4f6;
87.         }
88.       }
89.     }
91.     .active-course-content-item {
92.       background-color: #e7f3ff;
93.     }
94.   }
95. }

复制代码

重中之重的js代码：

2. // methods里的
4.     setTaskBox() {
5.       if (window.localStorage.getItem('lineLeft') != null) {
6.         const titleBox = document.getElementsByClassName('course-title-box')[0]
7.         const contentBox = document.getElementsByClassName('course-detail-content-box')[0]
8.         const line = document.getElementsByClassName('dividing-line')[0]
10.         line.style.left = window.localStorage.getItem('lineLeft') + '%'
11.         titleBox.style.width = window.localStorage.getItem('titleBoxWidth') + '%'
12.         contentBox.style.width = window.localStorage.getItem('contentBoxWidth') + '%'
13.       }
14.     },
16.     // 实现任务列表和任务详情显现区域变化功能
17.     changeTaskBox() {
18.       const titleBox = document.getElementsByClassName('course-title-box')[0]
19.       const contentBox = document.getElementsByClassName('course-detail-content-box')[0]
20.       const line = document.getElementsByClassName('dividing-line')[0]
21.       const box = document.getElementsByClassName('courer')[0]
22.       let titleBoxStyle = window.getComputedStyle(titleBox)
23.       let contentBoxStyle = window.getComputedStyle(contentBox)
24.       let boxStyle = window.getComputedStyle(box)
25.       console.log(titleBoxStyle.width, contentBoxStyle.width, boxStyle.width)
26.       // 鼠标按下事件
27.       line.onmousedown = e => {
28.         let titleBoxWidth = parseFloat(titleBoxStyle.width)
29.         let contentBoxWidth = parseFloat(contentBoxStyle.width)
30.         let boxWidth = parseFloat(boxStyle.width)
32.         const startX = e.clientX
33.         console.log('startX', startX)
34.         const lineLeft = line.offsetLeft
35.         console.log('lineLeft', lineLeft)
36.         // 鼠标拖动事件
37.         document.onmousemove = e => {
38.           const moveX = e.clientX
39.           console.log('moveX', moveX)
40.           // 鼠标移动距离
41.           let moveLen = lineLeft + moveX - startX
42.           moveLen = moveLen < 200 ? 200 : moveLen //左边区域最小宽度为200px
43.           moveLen = moveLen > boxWidth - 500 ? boxWidth - 500 : moveLen //右边区域最小宽度为500px
44.           line.style.left = moveLen + 'px'
45.           titleBox.style.width = moveLen + 'px'
46.           contentBox.style.width = boxWidth - moveLen + 'px'
47.           titleBoxWidth = parseFloat(titleBoxStyle.width)
48.           contentBoxWidth = parseFloat(contentBoxStyle.width)
49.         }
50.         // 鼠标松开事件
51.         document.onmouseup = function () {
52.           let newLineLeft = (parseInt(line.offsetLeft) / boxWidth).toFixed(2) * 100
53.           let newTitleBoxWidth = (titleBoxWidth / boxWidth).toFixed(2) * 100
54.           let newContentBoxWidth = (contentBoxWidth / boxWidth).toFixed(2) * 100
56.           window.localStorage.setItem('titleBoxWidth', newTitleBoxWidth)
57.           window.localStorage.setItem('contentBoxWidth', newContentBoxWidth)
58.           window.localStorage.setItem('lineLeft', newLineLeft)
59.           document.onmousemove = null
60.           document.onmouseup = null
61.         }
62.         return false
63.       }
64.     },

复制代码

e.clientX 是一个事故对象的属性，它表现鼠标指针相对于欣赏器视口（viewport）的水平位置。详细来说，e.clientX 返回鼠标指针相对于视口左边沿的 x 坐标。
mounted里的：

2.   mounted() {
3.     this.changeTaskBox()
4.     this.setTaskBox()
5.   },

复制代码

就可以完成拖动那根线，实现两边的盒子的宽度根据线的移动而变革；
offsetLeft 和 style.left 在 Vue 或 JavaScript 中有差别的用途和寄义：
1.offsetLeft：

• 是一个只读属性，表现元素相对于其迩来的定位先人元素（或视口）的左边沿的隔断。
  
• 它返回的是一个整数，单位是像素（px）
  
• 用于获取元素的当前位置，不可用于设置元素的位置
  

 2.style.left：

• style.left 是一个可读写属性，表现元素在 CSS 中的 left 属性值。
  
• 它可以直接修改元素的位置。
  
• 用于设置元素的 CSS left 属性，从而改变元素的位置。
  
• 可以设置为字符串情势，如 '100px' 或 100 + 'px'
  

 应用场景：

• 当你必要获取元素的当前位置时，使用 offsetLeft。
  
• 当你必要动态改变元素的位置时，使用 style.left。