【Vue】Vue3 超简单拖拽条动态修改容器宽度

demo

在这里插入图片描述

代码

在这里插入图片描述

const leftBoxWidth = ref(200); // 默认宽度
const leftResize = (e: MouseEvent) => {
  document.onselectstart = function () {
    return false;
  }; //解决拖动会选中文字的问题
  const startX = e.clientX;
  const startWidth = leftBoxWidth.value;
  const mouseMove = (documentE: MouseEvent) => {
    // 80 是左侧菜单宽度
    leftBoxWidth.value = startWidth + documentE.clientX - startX - 80;
  };
  const mouseUp = () => {
    document.removeEventListener('mousemove', mouseMove);
    document.removeEventListener('mouseup', mouseUp);
    // 拖拽完记得重新设置可以选中
    document.onselectstart = function () {
      return true;
    };
  };
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
};
  .drag-bar {
    width: 10px;
    cursor: col-resize;
    z-index: 999;
    &:hover {
      background-color: $color;
    }
  }
      .drag-bar {
      position: absolute;
      top: 0;
      left: -5px;
      height: 100%;
    }
### 使用 `ant-design-vue` 的 `a-layout` 组件实现拖拽改变容器宽度 为了实现在 `ant-design-vue` 中使用 `a-layout` 组件并允许用户通过拖拽来调整布局组件的宽度,可以借助第三方库如 `vue-draggable-resizable` 或者原生 JavaScript 实现这一功能。 #### 方法一:利用 `vue-draggable-resizable` 虽然此方法主要用于描述如何使弹窗具备拖拽能力[^1],但是相同的概念也可以应用于其他类型的 UI 元素上。对于想要让侧边栏或某个特定区域支持尺寸调整的情况来说,可以在该区域内包裹一层具有拖动特性的组件,并监听其大小变化事件以动态更新目标元素的实际宽高属性值。 ```html <template> <div class="layout-container"> <!-- 左侧可调节宽度 --> <a-layout-sider :width="siderWidth" style="background:#fff;"> Sider Content </a-layout-sider> <!-- 可拖拽的手柄 --> <vue-draggable-resizable @dragging="onDrag" @resizing="onResize" :w="handleSize.width" :h="handleSize.height" :parent="true" :active.sync="isActive"> <span>+</span> </vue-draggable-resizable> <!-- 主要内容区 --> <a-layout-content style="padding:0 24px;min-height:280px;background:white;"> Main content area... </a-layout-content> </div> </template> <script> import VueDraggableResizable from &#39;vue-draggable-resizable&#39; // 导入样式文件 (如果需要) import &#39;vue-draggable-resizable/dist/VueDraggableResizable.css&#39; export default { components: { VueDraggableResizable }, data() { return { isActive: false, handleSize: { width: 5, height: 30 }, // 手柄初始大小 siderWidth: 200 // 初始左侧宽度设置为200像素 } }, methods: { onResize(newW) { this.siderWidth = newW; }, onDrag(x) { const minWidth = 160; let nextSiderWidth = Math.max(minWidth, x); this.siderWidth = nextSiderWidth; } } } </script> <style scoped> .layout-container .vue-draggable-handle { position:absolute;left:100%;top:calc(50% - 15px);cursor:e-resize;z-index:9;width:auto;height:30px;line-height:30px;text-align:center;color:red;font-size:2em; } .vue-draggable-handle span{ transform:rotate(-90deg); } </style> ``` 上述代码片段中,通过引入 `vue-draggable-resizable` 并将其放置于两个主要部分之间作为手柄,实现了当鼠标点击并沿水平方向移动时能够实时修改左边栏(`a-layout-sider`)的宽度效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值