vue3 splitpanes分割面板使用
作者：奋斗的菠萝头
splitpanes是一个轻量级的 Vue 组件库,用于实现可拖拽的分栏布局分割面板,它支持Vue2和Vue3,常用于后台管理、文件管理器、数据看板等场景,让用户可以通过拖动分隔条动态调整面板的宽度或高度,感兴趣的可以了解一下
一.介绍
1.1 概念介绍
Splitpanes是一个轻量级的 Vue 组件库，用于实现可拖拽的分栏布局（分割面板）。它支持 Vue2 和 Vue3，常用于后台管理、文件管理器、数据看板等场景，让用户可以通过拖动分隔条动态调整面板的宽度或高度。
二. 安装及使用
2.1安装
npm install splitpanes # 或 yarn add splitpanes
2.2 使用
<template>
<Splitpanes class="default-theme">
<Pane min-size="15" size="25">
<!-- 左侧内容 -->
</Pane>
<Pane>
<!-- 右侧内容 -->
</Pane>
</Splitpanes>
<!-- horizontal:横向布局 -->
<Splitpanes horizontal>
<Pane>上面内容</Pane>
<Pane>下面内容</Pane>
</Splitpanes>
</template>
<script setup>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>- size ：面板初始宽度/高度，Number类型，单位为百分比。
- horizontal ：是否横向分割（上下布局），默认纵向（左右布局）。
- @resize ：拖动分隔条时触发，返回所有面板的尺寸数组。
- @resized ：拖动结束时触发，返回所有面板的尺寸数组。
- default-theme ：设置主题样式，官网有默认样式，也可以自定义。
到此这篇关于vue3 splitpanes分割面板使用的文章就介绍到这了,更多相关vue3 splitpanes分割面板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！