使用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. Eclipse上Maven环境配置使用

    1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http://maven. ...

  2. 关于 Spring AOP (AspectJ) 你该知晓的一切

    版权声明:本文为CSDN博主「zejian_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/javazej ...

  3. Parity game(带权并查集+离散化)

    题目链接  //kuangbin 题意: 现在你和你的朋友正在玩一种游戏. 你的朋友写下一串0和1的序列,然后你选择其中一串子序列(如[3,5])并且问他这个序列是包含奇数个1还是偶数个1(和是奇数还 ...

  4. 罗技k380在iOS下无法输入英文引号

    本来打算用iPad远程控制电脑主机进行编程的,但是在键盘回来之后开始试着用的时候发现没法输入英文状态的引号. 各种更换输入法都没有用.没有英文引号还写个锤子的代码. 解决办法:设置-通用-键盘,然后将 ...

  5. java服务端的效率

    java服务端的效率 可以的 socketclient  thread 线程池 发送消息  80个socket client并发

  6. P4160 [SCOI2009]生日快乐[dfs]

    题目描述 windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕. 现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋糕. win ...

  7. python开发总结

    1.思维缜密的编程逻辑 2.满足明确的目的需求 3.运用现成的轮子加以改造 4.学会装饰自己的程序 5.化繁为简 6.多用配置文件作为入口 7.注意扩展兼容

  8. 在windows下安装cx_Oracle问题

    将 instantclient_11_2 所在的目录添加到环境变量,但是环境变量有时没有立即生效,可以复制 oci.dll(版本也要正确)到 \Python36\Lib\site-packages 目 ...

  9. 【Selenium-WebDriver实战篇】Eclipse上的maven使用JsonObject时,添加依赖后无法自动下载相应的jar包

    ==================================================================================================== ...

  10. Vue --- 指令练习

    scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67, chinese: 52 ...