轻松上手！Vue 轻松调整两侧 Div 宽度，左右拖曳随心所欲

2023-04-23 21:39:55

Vue.js 实现左右两侧 Div 拖曳调整宽度，打造灵活响应式布局

简介

在现代网页设计中，响应式布局至关重要，允许网站在不同屏幕尺寸下自适应调整。对于拥有两侧栏或导航菜单的网站，控制两侧 Div 的宽度对于实现这种响应式至关重要。本文将深入探讨如何利用 Vue.js 实现两侧 Div 宽度拖曳调整功能，让你轻松掌控网页布局。

创建 Vue 实例

首先，我们需要创建一个 Vue 实例作为应用的根节点。在这个实例中，我们定义了两个数据属性，即 leftWidth 和 rightWidth，它们分别代表左右两侧 Div 的初始宽度。

const app = new Vue({
  el: '#app',
  data: {
    leftWidth: 200, // 左侧 Div 的初始宽度
    rightWidth: 400  // 右侧 Div 的初始宽度
  }
});

创建可拖曳的 Div

接下来，我们需要创建两个 Div 元素，它们将充当左右两侧的栏。我们将使用 Vue 的 v-bind 指令来动态绑定 Div 的宽度，使其与 Vue 实例中的数据属性保持同步。

<div class="left-div" :style="{ width: leftWidth + 'px' }"></div>
<div class="right-div" :style="{ width: rightWidth + 'px' }"></div>

添加拖曳事件监听器

为了实现拖曳功能，我们需要在 Div 元素上添加事件监听器，以响应鼠标事件。我们将使用 Vue 的自定义指令来实现这一目的。

app.directive('drag', {
  bind(el, binding, vnode) {
    el.addEventListener('mousedown', (e) => {
      // 获取鼠标点击位置
      const startX = e.clientX;
      
      // 获取当前 Div 的宽度
      const startWidth = binding.value.width;

      // 添加鼠标移动事件监听器
      document.addEventListener('mousemove', (e) => {
        // 计算新宽度
        const newWidth = startWidth + (e.clientX - startX);

        // 更新绑定值中的宽度
        binding.value.width = newWidth;
      });

      // 添加鼠标松开事件监听器
      document.addEventListener('mouseup', () => {
        // 移除鼠标移动事件监听器
        document.removeEventListener('mousemove', null);
      });
    });
  }
});

应用拖曳指令

现在，我们可以将自定义拖曳指令应用到左右两侧的 Div 元素上。这将允许我们通过拖动 Div 的边缘来调整其宽度。

<div class="left-div" :style="{ width: leftWidth + 'px' }" v-drag="{ width: leftWidth }"></div>
<div class="right-div" :style="{ width: rightWidth + 'px' }" v-drag="{ width: rightWidth }"></div>