【Vue3】SplitPane 可拖拽分隔面板组件

已于 2023-06-16 17:28:58 修改
阅读量2.9k 收藏 1
点赞数 2
分类专栏： 自定义组件 文章标签： 前端 vue.js
于 2023-01-14 15:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Komorebi_00/article/details/128685725
版权

1. 效果图

在这里插入图片描述

2. 组件完整代码

<template>
    <div ref="splitPaneRef" class="split-pane" :class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Komorebi゛
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue项目使用splitpanes插件（垂直水平分割窗口）
吴小花的博客
12-01 1万+
需求：实现可调节的窗口面板。 先安装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.
基于Vue.js的可拖拽树组件
05-07
**基于Vue.js的可拖拽树组件** 在前端开发中，常常需要实现各种交互式的UI组件，其中树形结构是一种常见的数据展示方式。Vue.js，作为一款轻量级且功能强大的JavaScript框架，提供了丰富的插件和组件库来帮助开发者...
split-pane:基于Vue 实现面板分割组件
05-09
面板分割组件(Vue) npm i npm start 具体详情
VUE实现可随意拖动的弹窗组件
10-17
今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
技术验证：vueRouter的命名视图加splitpanes分割面板实现一个页面多个模块同时处理不同页面的功能
2301_78419762的博客
05-24 286
为了实现一个可以左边窗口打页游，右边窗口上方显示分析功能，下方显示其他页面如浏览器看B站的功能，我使用splitpanes和vueRouter的命名视图实现了三个模块各干各的互不干扰。提示：以下是本篇文章正文内容，下面案例可供参考主要使用vueRouter的全局前置守卫来进行判断ABC三个部分哪个页面要跳转，如果只有一个页面跳转则跳转前页面的ABC内容覆盖掉其他两个页面。
分割面板组件
鲸落
06-01 1567
一、前言 项目中遇到需求：将界面，分割为可以拖拽调整宽度两部分区域，并且可以兼容到ie9+，如图： 做项目的过程中学习到了几种同类的插件总结下 ???? 二、学习 1、vue-split-panel （能兼容到ie9+） 安装 npm install vue-split-panel 在main.js中引用 import VueSplit from 'vue-split-panel' Vue.use(VueSplit) 使用<Split style="height: 100vh" :gu
推荐一款神奇的前端组件：Vue-Split-Pane
gitblog_00030的博客
04-16 722
推荐一款神奇的前端组件：Vue-Split-Pane 项目地址:https://gitcode.com/PanJiaChen/vue-split-pane Vue-Split-Pane 是一个基于 Vue.js 的轻量级、高度可定制的分隔面板组件，它允许你在界面上动态地创建和调整两个视图之间的大小。对于需要构建具有灵活布局的应用程序，无论是桌面端还是移动设备，Vue-Split-Pane 都是一个...
在Vue3 使用 element-plus 、 splitpanes 和 el-tab 把界面分成上下部分布局，并且支持 内容超过 进行滚动，且 滚动时候tabs的标题栏不会滚动
hymlx526的博客
05-26 3712
element-plus、splitpanes、el-tab 上下布局、tabs标题不需要自行滚动
前端——封装vue通用拖拽滑动分隔面板组件（Split）
helloyangkl的博客
12-30 1813
前端——封装vue通用拖拽滑动分隔面板组件（Split）
Splitpanes拆分窗格插件使用
qq_52845451的博客
03-12 2467
Splitpanes拆分窗格插件使用
vue3基础
你还有我
06-14 1444
目录vue3的特点vue3的实例化创建vue3 的组件创建组件通信组合式APIsetup函数setup函数中数据响应式setup函数中应用计算属性和侦听器计算属性计算属性的getter 和 setter侦听器 vue3的特点 打包体积更小 新的代码编写方式 组合式API( Composition API) 提供了一些新的方法 比如setup()函数， computed vue3 使用 es6的 Proxy 实现数据的双向绑定 vue3 使用 摇树（tree shaking）的机制 vue3的实例化创建
vue中，页面布局之使用vue-splitpane实现窗格的拆分和调节，类似于flex布局
weixin_44867717的博客
12-04 2121
flex
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
vue draggable resizable 实现可拖拽缩放的组件功能
10-16
主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-封装分割面板
李@@的博客
08-31 648
记录一次 分割面板的封装： <template> <div class="split-pane-wrapper" ref="outer"> <div class="pane pane-left" :style="{ width: leftOffsetPercent }"> <slot name="left"></slot> </div> <div class="pane-tri
【Splitpanes】Vue.js 靠谱、简单并支持触摸的窗格分割器/调整器。
最新发布
行如逆水行舟，不进则退
06-21 361
Vue.js 靠谱、简单并支持触摸的窗格分割器/调整器。用于实现可调节窗口，支持Vue2、Vue3。
Vue.js可靠、简单且易于触摸的窗格拆分器/调整大小器。
qq_33365152的博客
08-29 260
Vue.js可靠、简单且易于触摸的窗格拆分器/调整大小器。
vue中使用vue-splitpane 拉伸缩小插件
weixin_48447589的博客
05-30 1784
1.下载插件（vue2）
vue实现多栏布局（拖拽改变盒子的宽度和高度），任意区域最大化/最小化，并且实现类似vscode，一键折叠展开相应区域
前端笔记——放弃很容易,但坚持一定很酷
07-04 2140
网页多栏布局，拖动改变宽高，类似vscode的区域折叠/展开功能，任意区域的最大化/最小化效果
vue-splitpanes
08-13
### 回答1： `vue-splitpanes`是基于`splitpanes`的Vue组件，可以快速在Vue应用程序中使用Splitpanes组件。 要使用`vue-splitpanes`，请按照以下步骤进行操作： 1. 安装`vue-splitpanes`依赖： ```bash npm install vue-splitpanes --save ``` 2. 在需要使用 Splitpanes 的 Vue 组件中引入组件： ```javascript import VueSplitpanes from 'vue-splitpanes' import 'vue-splitpanes/dist/vue-splitpanes.css' ``` 3. 在 Vue 组件的`template`中使用 VueSplitpanes 组件： ```html <template> <vue-splitpanes> <vue-splitpanes-pane :size="30%"> <!-- 左侧面板内容 --> </vue-splitpanes-pane> <vue-splitpanes-pane :size="70%"> <!-- 右侧面板内容 --> </vue-splitpanes-pane> </vue-splitpanes> </template> ``` 4. 可以根据需要设置 VueSplitpanes 的属性和样式，例如： ```html <template> <vue-splitpanes direction="vertical"> <vue-splitpanes-pane :size="30%"> <!-- 左侧面板内容 --> </vue-splitpanes-pane> <vue-splitpanes-pane :size="70%"> <!-- 右侧面板内容 --> </vue-splitpanes-pane> </vue-splitpanes> </template> <style> .vue-splitpanes { height: 500px; } </style> ``` 这样就可以在 Vue 中使用 VueSplitpanes 了。希望这些步骤对你有所帮助！ ### 回答2： vue-splitpanes是一个基于Vue.js的可拖动分割面板组件。它可以方便地在Web应用中实现分割布局，用户可以通过拖动分隔条来调整面板的大小和位置。 vue-splitpanes的主要特点包括： 1. 灵活性：可以根据需要嵌套多个面板，并且可以水平或垂直排列。每个面板的大小可以自由调整，使得用户可以根据自己的喜好来调整布局。 2. 响应式：面板的大小可以根据父容器的大小自动调整。当窗口大小改变时，面板的大小会自动适应，并且分隔条的位置也会相应地进行调整，保证布局的美观性和合理性。 3. 可定制性：用户可以通过设置不同的属性来自定义分隔条的样式、大小和位置。还可以通过传递插槽来定制每个面板的内容，实现更灵活的布局效果。 4. 兼容性：vue-splitpanes可以与其他Vue.js组件和插件无缝集成，可以与其他功能模块进行联动，实现更加丰富的交互效果。 5. 跨平台支持：vue-splitpanes可以在不同的浏览器和设备上运行，包括桌面、平板和手机等各种终端设备。 总之，vue-splitpanes为Vue.js开发者提供了一个方便易用、灵活性高的分割面板组件，可以帮助开发者快速实现自定义的分割布局，提升用户体验。 ### 回答3： vue-splitpanes是一个基于Vue.js的可拖动分隔面板组件，它允许用户在页面上创建可调整大小的分隔面板。该组件可以用于实现多种布局，比如创建一个类似于Windows资源管理器的双栏布局或者实现一个可以自定义宽度和高度的面板布局。 vue-splitpanes组件的主要特点有： 1. 可以在水平和垂直方向上拖动分隔面板，实现面板的调整大小。 2. 支持多个面板之间的分隔栏，可以在同一父级组件中创建多个面板。 3. 可以使用CSS样式来自定义面板的外观，包括面板的颜色、边框样式等。 4. 可以通过设置最小和最大的宽度和高度来限制面板的调整范围。 5. 支持响应式设计，可以根据不同的屏幕尺寸自适应调整面板的布局。 6. 内部面板可以嵌套其他组件，实现更复杂的布局和交互效果。 使用vue-splitpanes组件可以很方便地实现可调整大小的分隔面板布局，可以在网页应用中提供更灵活和用户友好的界面。通过灵活使用vue-splitpanes的API和CSS样式，可以实现各种各样的布局需求，提升用户体验，并增加页面的可定制性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Komorebi゛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值