vue3 可拖动的左右面板分割组件实现

针对“vue3 可拖动的左右面板分割组件实现”的话题，我将为你提供详细的攻略，包含以下内容：

确定组件需求和功能
搭建基本的组件结构和布局
实现拖动效果
处理拖动边缘限制和动态宽度变化
实现完整功能

下面我们就来一步一步地讲解每个步骤，供你参考。

1. 确定组件需求和功能

我们的目标是创建一个可拖动的左右面板分割组件，使得用户可以自由拖动左右两个面板的宽度，以实现多种效果。具体功能如下：

左右两个面板的宽度可以自由拖动调整，满足不同的排布需求；
拖动过程中，两个面板的宽度比例可以自适应调整，并始终保持在一个合理的范围内；
当拖动到最左边或最右边时，左或右面板不能再继续往左或右移动。

2. 搭建基本的组件结构和布局

在Vue3中，通常我们会使用单文件组件（SFC）来开发，因此我们需要创建一个名为SplitPane.vue的组件文件，并在里面添加模板，脚本和样式三个部分。

现在我们来定义组件模板，实现基本的布局效果：

<template>
  <div class="split-pane">
    <div class="split-pane__left" :style="{ width: leftWidth + '%'}"></div>
    <div class="split-pane__dragbar"></div>
    <div class="split-pane__right" :style="{ width: rightWidth + '%'}"></div>
  </div>
</template>

其中，我们定义了三个容器元素：split-pane、split-pane__left和split-pane__right，分别对应整个组件，左面板和右面板。我们还定义了一个分割条元素split-pane__dragbar，用于拖动调整面板宽度。

3. 实现拖动效果

现在我们开始实现拖动效果。我们可以在分割条上绑定一个mousedown事件，并在拖动条上添加一个“可拖动”类（dragging），以供后面调整样式用。同时，我们还需要绑定整个文档的mousemove和mouseup事件，以处理当鼠标移动或者松开时的拖动效果。

下面是代码示例：

<template>
  <div class="split-pane">
    <div class="split-pane__left" :style="{ width: leftWidth + '%'}"></div>
    <div class="split-pane__dragbar" @mousedown="handleMouseDown"></div>
    <div class="split-pane__right" :style="{ width: rightWidth + '%'}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dragging: false, // 是否在拖动中
      leftWidth: 50, // 左面板的宽度
      rightWidth: 50 // 右面板的宽度
    };
  },
  methods: {
    handleMouseDown() {
      // 绑定mousemove、mouseup事件
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
      // 添加拖动样式
      this.dragging = true;
      document.body.classList.add('dragging');
    },
    handleMouseMove(event) {
      if (this.dragging) {
        // 计算拖动的距离
        const dx = event.pageX - this.$refs.dragbar.offsetLeft;
        const totalWidth = this.$el.clientWidth;
        // 计算左右两个面板的宽度
        const leftWidth = ((this.leftWidth / totalWidth) * totalWidth + dx) / totalWidth * 100;
        const rightWidth = ((this.rightWidth / totalWidth) * totalWidth - dx) / totalWidth * 100;
        // 更新状态
        this.leftWidth = leftWidth > 0 ? leftWidth : 0;
        this.rightWidth = rightWidth > 0 ? rightWidth : 0;
      }
    },
    handleMouseUp() {
      // 解除事件绑定和拖动样式
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
      this.dragging = false;
      document.body.classList.remove('dragging');
    }
  }
};
</script>

<style scoped>
.split-pane {
  display: flex;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.split-pane__left,
.split-pane__right {
  height: 100%;
  position: absolute;
  top: 0;
}

.split-pane__left {
  left: 0;
  background-color: #f0f0f0;
}

.split-pane__right {
  right: 0;
  background-color: #fff;
}

.split-pane__dragbar {
  height: 100%;
  width: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: ew-resize;
}

.dragging {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
</style>

4. 处理拖动边缘限制和动态宽度变化

在第三步中，我们已经成功地实现了基本的拖动效果。但是，在实际操作中我们会发现，在拖动到左边沿或右边沿时，左侧或右侧的面板不会再继续移动，这是我们需要进行进一步处理的地方。

我们可以在handleMouseMove方法中添加如下代码，来限制拖动的最小和最大宽度：

const minLeftWidth = 0;
const maxRightWidth = 100;
const percentWidth = totalWidth / 100; // 计算总宽度的百分比

// 计算限制后的宽度
const left = leftWidth > minLeftWidth ? leftWidth : minLeftWidth;
const right = rightWidth > 0 ? (rightWidth < maxRightWidth ? rightWidth : maxRightWidth) : 0;

// 计算拖动后左、右面板的宽度，并进行相应的百分比转换
this.leftWidth = left / percentWidth;
this.rightWidth = right / percentWidth;

另外，我们可能还会发现一个问题：当拖动后，两个面板的宽度比例可能不会保持不变，这可能会导致排版效果不佳。解决这个问题的办法是在组件初始化的时候，根据初始比例计算出左右面板的宽度，随着拖动变化也可以根据新的比例计算出左右面板的宽度来进行动态更新。

5. 实现完整功能

现在我们已经实现了拖动效果并限制了左右面板的拖动边界，但我们的组件是静态的，无法响应外部的变化。因此，我们需要在SplitPane组件中添加一个props来允许外部传入初始的左右面板宽度比例，从而能够动态更新组件的状态。

同时，我们可以添加事件回调并在拖动状态发生改变时进行触发：

export default {
  props: {
    initLeftWidth: {
      type: Number,
      default: 50
    },
    initRightWidth: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      dragging: false,
      leftWidth: this.initLeftWidth,
      rightWidth: this.initRightWidth
    };
  },
  mounted() {
    const totalWidth = this.$el.clientWidth;
    const percentWidth = totalWidth / 100;
    this.leftWidth = this.initLeftWidth / percentWidth;
    this.rightWidth = this.initRightWidth / percentWidth;
  },
  methods: {
    handleMouseMove(event) {
      // ...
      if (this.dragging) {
        // 计算拖动的距离
        const dx = event.pageX - this.$refs.dragbar.offsetLeft;
        const totalWidth = this.$el.clientWidth;
        // 计算左右两个面板的宽度
        const leftWidth = ((this.leftWidth / percentWidth) * totalWidth + dx) / totalWidth * 100;
        const rightWidth = ((this.rightWidth / percentWidth) * totalWidth - dx) / totalWidth * 100;
        // 计算限制后的宽度
        const minLeftWidth = 0;
        const maxRightWidth = 100;
        const left = leftWidth > minLeftWidth ? leftWidth : minLeftWidth;
        const right = rightWidth > 0 ? (rightWidth < maxRightWidth ? rightWidth : maxRightWidth) : 0;
        // 计算拖动后左、右面板的宽度，并进行相应的百分比转换
        this.leftWidth = left / percentWidth;
        this.rightWidth = right / percentWidth;
        // 触发事件回调
        this.$emit('dragging', this.leftWidth, this.rightWidth);
      }
    },
    handleMouseUp() {
      // ...
      this.$emit('draggend', this.leftWidth, this.rightWidth);
    }
  }
};

这样，我们就成功地实现了一个可拖动的左右面板分割组件，并且可以响应外部状态变化。接下来，我们可以在父组件中使用这个组件，并进行相应的事件调用。

下面提供一个示例代码供你参考：

<template>
  <div>
    <SplitPane ref="splitPane" :init-left-width="30" :init-right-width="70" @dragging="handleDragging" @dragend="handleDragEnd" />
  </div>
</template>

<script>
import SplitPane from './SplitPane.vue';

export default {
  components: {
    SplitPane
  },
  methods: {
    handleDragging(leftWidth, rightWidth) {
      console.log('正在拖动，当前状态：', leftWidth, rightWidth);
    },
    handleDragEnd(leftWidth, rightWidth) {
      console.log('拖动结束，最终状态：', leftWidth, rightWidth);
    }
  }
};
</script>

这里我们可以看到，我们实例化了一个SplitPane组件，并对其进行了一些props传递和事件监听。当我们拖动时，就可以看到SplitPane组件会动态地更新状态，并打印出事件回调的内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue3 可拖动的左右面板分割组件实现 - Python技术站