一.介绍

1.1 概念介绍

Splitpanes是一个轻量级的 Vue 组件库，用于实现可拖拽的分栏布局（分割面板）。它支持 Vue2 和 Vue3，常用于后台管理、文件管理器、数据看板等场景，让用户可以通过拖动分隔条动态调整面板的宽度或高度。

二. 安装及使用

2.1安装

npm install splitpanes
# 或
yarn add splitpanes

2.2 使用

上面内容下面内容
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

• size ：面板初始宽度/高度，Number类型，单位为百分比。
• horizontal ：是否横向分割（上下布局），默认纵向（左右布局）。
• @resize ：拖动分隔条时触发，返回所有面板的尺寸数组。
• @resized ：拖动结束时触发，返回所有面板的尺寸数组。
• default-theme ：设置主题样式，官网有默认样式，也可以自定义。

到此这篇关于vue3 splitpanes分割面板使用的文章就介绍到这了,更多相关vue3 splitpanes分割面板内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！