vue---splitpane分割
使用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分割的更多相关文章
- Vue代码分割懒加载的实现方法
什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...
- 大白话Vue源码系列(03):生成AST
阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...
- 【javaFX学习】(二) 面板手册--1
找了好几个资料,没找到自己想要的,自己写个列表吧,方便以后用的时候挑选,边学边记.以学习笔记为主,所以会写的会偏个人记忆性.非教程,有什么问题一起讨论啊. 各个不同的控件放入不同的面板中有不同的效果, ...
- JAVAFX-6 面板总结
说明:转至:https://www.cnblogs.com/lensener/p/7978225.html 便于集中看到这些文章 面板列表: Accordion 手风琴面板:就是一个折叠展开功能,一般 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- 【javaFX学习】(二) 面板手册
移至http://blog.csdn.net/qq_37837828/article/details/78732591 更新 找了好几个资料,没找到自己想要的,自己整理下吧,方便以后用的时候挑选,边学 ...
- 王下邀月熊_Chevalier的前端每周清单系列文章索引
感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...
- vue或者js中平均分割数组
vue中 把一段长数组按照指定份数 均分 sliceArray(array, size) { var result = []; for (var x = 0; x < Math.ceil(arr ...
随机推荐
- 【Docker】docker安装GitLab
一.下载镜像 docker pull gitlab/gitlab-ce 二.运行GitLab容器 1.生成启动文件 - start.sh 使用docker命令运行容器,注意修改hostname为自己喜 ...
- Linux无法被远程登录;用户的关机, 重启,注销,新增用户,删除用户
不能使用xshell连接到我的Linux服务器 通过再windows的cmd中ping了我的Linux地址,发现网络不通. 查看百度发现是因为网络没有选桥接模式,然后选完桥接模式告诉我: 然后发现没有 ...
- Linux-网络RAID技术DRBD
DRBD简介 官方文档 DRBD的全称为:Distributed Replicated Block Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本构成,用以构建高可用的集群. ...
- 树莓派上 Docker 的安装和使用
Docker 是一个开源的应用容器引擎,可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不 ...
- P4139 上帝与集合的正确用法[欧拉定理]
题目描述 求 \[ 2^{2^{2\cdots}} ~mod ~p \] 简单题,指数循环节. 由于当\(b>=\psi(p)\)时,有 \[ a^b=a^{b ~mod~\psi(p)+\ps ...
- Python开发应用之-SQL 建索引的几大原则
SQL 建索引的几大原则: 最左前缀匹配原则,非常重要的原则,mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a = 1 and b = ...
- Spring源码窥探之:注解方式的AOP原理
AOP入口代码分析 通过注解的方式来实现AOP1. @EnableAspectJAutoProxy通过@Import注解向容器中注入了AspectJAutoProxyRegistrar这个类,而它在容 ...
- Python 3.6 抓取微博m站数据
Python 3.6 抓取微博m站数据 2019.05.01 更新内容 containerid 可以通过 "107603" + user_id 组装得到,无需请求个人信息获取: 优 ...
- 04-Flutter移动电商实战-打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- LeetCode 841. Keys and Rooms
原题链接在这里:https://leetcode.com/problems/keys-and-rooms/ 题目: There are N rooms and you start in room 0. ...