Vue项目使用splitpanes插件（垂直水平分割窗口）

最新推荐文章于 2025-04-10 15:22:46 发布

吴小花的博客

最新推荐文章于 2025-04-10 15:22:46 发布

阅读量1.1w

点赞数 6

分类专栏： element-ui Vue.js 项目实战经验

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/110437979

版权

Vue.js 项目实战经验同时被 2 个专栏收录

52 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

element-ui

18 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue项目中使用splitpanes插件来创建垂直和水平分割的窗口面板，允许用户自定义窗口大小。通过设置min-size和max-size属性，可以控制面板的最小和最大百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：实现可调节的窗口面板。

先安装splitpanes插件

npm i splitpanes //For Vue 2.x.

npm i splitpanes@next //For Vue 3.

// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane },
  ...
}

min-size="0" max-size="35"设置左边窗口可调节的最大百分比和最小百分比

html:

<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 400px">
  <pane :size="paneSize" min-size="0" max-size=

了解本专栏

超级会员免费看