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

原文出处: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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值