vue2实现左右布局宽度可拖拽

chelen_jak

于 2023-10-19 14:35:38 发布

阅读量501

点赞数

文章标签： javascript

原文出处：https://blog.csdn.net/AA_12138/article/details/129466727?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129466727-blog-132550808.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-129466727-blog-132550808.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=1

再项目中可能遇到左树右表的布局，左边的树如果文本太长或者子集太多，会导致显示不下，这时候有两种解决方式，一种是加横向滚动条，另一种是让左边盒子的宽度可以拖拽。

直接上代码

<template>
    <div class="out-box">
        <div class="left-box" :style="{ width: `${lastX}px`}">
           <div class="x-resizer" @mousedown="mouseDown"></div>
        </div>
        <div class="right-box">
        </div>
    </div>      
</template>
<script>
export default {
  data() {
    return {
      leftBarWidth: 360,
      startX: 0,
      lastX: 360
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
   
    mouseDown(e) {
      this.startX = e.clientX
      this.mouseMove(e)
      this.mouseUp()
      document.addEventListener('mousemove', this.mouseMove,  { passive: false })
      document.addEventListener('mouseup', this.mouseUp,  { passive: false })
    },
    mouseUp() {
      this.leftBarWidth = this.lastX
      document.removeEventListener('mousemove', this.mouseMove,  { passive: false })
      document.removeEventListener('mouseup', this.mouseUp,  { passive: false })
    },
    mouseMove(moveEvent) {
      moveEvent.preventDefault()
      moveEvent.stopPropagation()
      const offset = moveEvent.clientX - this.startX
      if (this.offset !== 0) {
        this.lastX = offset + this.leftBarWidth
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.out-box{
    display:flex;
    height:100%;
     .left-box {
          min-width: 35px;
          background: #FFFFFF;
          position: relative;
 
          .x-resizer {
            position: absolute;
            top: 50%;
            right: -11px;
            z-index: 1;
            width: 25px;
            height: 50px;
            margin-top: -25px;
            border-radius: 5px;
            background-color: gray;
            cursor: col-resize;
          }
        }
        .right-box {
          flex: 1;
          background: #FFFFFF;
          margin-left: 10px;
          position: relative;
          min-width: 650px;
        }
      }
</style>