使用splitpane可以对窗口进行拆分,这个splitpane组件还是比较好用的,

首先安装:

npm install vue-splitpane

引入使用:

import splitPane from 'vue-splitpane'
Vue.component('split-pane', splitPane);

分割成两列:

<split-pane v-on:resize="resize" :min-percent='' :default-percent='' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
B
</template>
</split-pane>

分割成三列:

<split-pane v-on:resize="resize" :min-percent='' :default-percent='' split="vertical">
<template slot="paneL">
A
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
B
</template>
<template slot="paneR">
C
</template>
</split-pane>
</template>
</split-pane>

参考文档:https://www.npmjs.com/package/vue-splitpane

vue---splitpane分割的更多相关文章

  1. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  2. 大白话Vue源码系列(03):生成AST

    阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...

  3. 【javaFX学习】(二) 面板手册--1

    找了好几个资料,没找到自己想要的,自己写个列表吧,方便以后用的时候挑选,边学边记.以学习笔记为主,所以会写的会偏个人记忆性.非教程,有什么问题一起讨论啊. 各个不同的控件放入不同的面板中有不同的效果, ...

  4. JAVAFX-6 面板总结

    说明:转至:https://www.cnblogs.com/lensener/p/7978225.html 便于集中看到这些文章 面板列表: Accordion 手风琴面板:就是一个折叠展开功能,一般 ...

  5. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  6. 【javaFX学习】(二) 面板手册

    移至http://blog.csdn.net/qq_37837828/article/details/78732591 更新 找了好几个资料,没找到自己想要的,自己整理下吧,方便以后用的时候挑选,边学 ...

  7. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  8. 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

    当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...

  9. vue或者js中平均分割数组

    vue中 把一段长数组按照指定份数 均分 sliceArray(array, size) { var result = []; for (var x = 0; x < Math.ceil(arr ...

随机推荐

  1. 使用awrsqrpt.sql查看执行计划demo

    SQL> @?/rdbms/admin/awrsqrpt.sql Current Instance ~~~~~~~~~~~~~~~~ DB Id DB Name Inst Num Instanc ...

  2. linux绝大部分命令集合(自己需要的时候方便查找)

    原网页:https://www.linuxidc.com/Linux/2018-04/151726.htm 系统信息显示命令arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构 ...

  3. Linux正则表达式、shell基础、文件查找及打包压缩

    Linux正则表达式.shell基础.文件查找及打包压缩 一.正则表达式 Linux正则表达式分为2类: 1.基本正则表达式(BRE) 2.扩展正则表达式(ERE) 两者的区别: 1.使用扩展正则表达 ...

  4. 华为OSPF与ACL综合应用实例

    实验要求1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R1.R2.R3只允许被IT登录管理:4.YF和CW之间不能互通,但都可以与IT互 ...

  5. Tomcat--安装部署

    Tomcat安装部署 Tomcat简介 官网:http://tomcat.apache.org/ Tomcat服务器是一个免费的开源代码的Web应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...

  6. admin端的教师管理功能测试

    1  概述 1.1   测试范围 本次所测试的内容是admin端的教师管理功能. 1.2   测试方法 采用黑盒子方法进行集成测试. 1.3   测试环境 (1)   服务器l  操作系统:Windo ...

  7. python笔记40-环境迁移freeze生成requirements.txt

    前言 我们用python在本地电脑上开发完成一个python自动化项目用例,或者开发完成一个django项目. 需要部署到另外一台电脑或者服务器上的时候,需要导入python相关的依赖包,可以用fre ...

  8. Centos7-安装py3

    安装依赖 yum install gcc openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel li ...

  9. Linux系统硬盘扩容

    参考教程:https://www.jb51.net/article/144291.htm 1.查看硬盘已经用了99% $ df -h #查看硬盘已经使用了99% 文件系统 容量 已用 可用 已用% 挂 ...

  10. Kali Linux 2019.4中文乱码解决

    1.先换源deb http://mirrors.aliyun.com/kali kali-rolling main non-free contribdeb-src http://mirrors.ali ...