动态可拖动的左右分割面板，Vue 3 为您轻松构建多栏布局

2023-09-19 12:10:38







## 概述

可拖动的左右分割面板组件是一个 Vue 3 组件，可让您轻松创建具有多个栏目的布局。该组件使用 Vue 3 的响应式系统来管理栏目的大小，并使用 Vue 3 的拖放 API 来实现拖放功能。

## 安装

要安装可拖动的左右分割面板组件，请使用以下命令：

npm install vue3-resizable-splitter


## 用法

要使用可拖动的左右分割面板组件，请在您的 Vue 3 组件中导入它：

import ResizableSplitter from 'vue3-resizable-splitter'


然后，您可以将 `<resizable-splitter>` 元素添加到您的模板中：

```

属性

可拖动的左右分割面板组件具有以下属性：

orientation: 分割面板的方向。可以是 'horizontal' 或 'vertical'。
splitPercentage: 初始时每个窗格所占的百分比。
minWidth: 每个窗格的最小宽度或高度（取决于方向）。
maxWidth: 每个窗格的最大宽度或高度（取决于方向）。
snapOffset: 分割面板的捕捉偏移量。这是在拖动时分割面板捕捉到最近的百分比边界的距离。
handleSize: 分割面板句柄的大小。

事件

可拖动的左右分割面板组件发出以下事件：

split-percentage-changed: 当分割面板的百分比发生变化时触发。
drag-start: 当开始拖动分割面板时触发。
drag-end: 当停止拖动分割面板时触发。

示例

以下是一个使用可拖动的左右分割面板组件的示例：

<template>
  <resizable-splitter :orientation="'horizontal'" @split-percentage-changed="onSplitPercentageChanged">
    <div>内容 1</div>
    <div>内容 2</div>
  </resizable-splitter>
</template>

<script>
export default {
  methods: {
    onSplitPercentageChanged(splitPercentage) {
      console.log(splitPercentage)
    }
  }
}
</script>