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
    评论
对于vue实现拖拽宽度的菜单,可以使用vuedraggable插件和vue-resizable插件。 vuedraggable插件可以实现拖拽排序的功能,而vue-resizable插件可以实现拖拽改变元素大小的功能。 以下是一个简单的实现示例: 1. 安装vuedraggable和vue-resizable插件 ``` npm install vuedraggable vue-resizable ``` 2. 在组件中引入插件并初始化 ``` <template> <div class="menu"> <vue-draggable v-model="menuItems"> <div v-for="(item, index) in menuItems" :key="index" class="menu-item"> <vue-resizable :resizable="true" :on-resize-stop="resize" :max-width="200" :min-width="100"> {{ item }} </vue-resizable> </div> </vue-draggable> </div> </template> <script> import draggable from 'vuedraggable' import resizable from 'vue-resizable' export default { components: { 'vue-draggable': draggable, 'vue-resizable': resizable }, data () { return { menuItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] } }, methods: { resize (event) { console.log(event) } } } </script> ``` 在上面的代码中,使用了vuedraggable组件来包裹菜单项,使用了vue-resizable组件来包裹每个菜单项,并设置了最大和最小宽度,并在on-resize-stop事件中调用了resize方法。 3. 样式设置 为了使菜单项可拖拽和可改变大小,需要为其设置一些基本样式: ``` .menu { display: flex; flex-wrap: wrap; justify-content: flex-start; } .menu-item { display: flex; align-items: center; justify-content: center; margin: 10px; padding: 10px; background-color: #ccc; border: 1px solid #000; cursor: move; } ``` 在上面的样式中,设置了菜单项为flex布局,并设置了一些基本样式,如背景色、边框等。 这样就可以实现一个简单的可拖拽和可改变大小的菜单了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值