场景:左侧菜单栏,右侧内容区,可以拖拽菜单
场景:左侧菜单栏,右侧内容区,可以拖拽菜单栏右侧边界控制菜单栏宽度
npm i dragDiv-right 引入
//原生引入: const {dragDiv} = require("dragDiv-right") //vue引入: import {dragDiv} from 'dragdiv-right' 使用
<div id="dictionary"> <div id="tree"> 左侧元素 </div> <!-- 分割线,用来拖拽 --> <div id="middle"></div> <div id="content"> 内容区 </div> </div>
//大概是这种布局样式 #dictionary { //父元素 width: 100%; box-sizing: border-box; height: 100%; display: flex; } #middle{//拖拽div cursor:col-resize; height:100%; position: relative; width: 2px; border-left: 1px solid #8f949a; } #tree {//左侧菜单 width: 300px; height: 100%; overflow: auto; background: #fff; } .content{//右侧内容区 flex: 1; height: 100%; }
//vue使用方法: mounted(){ dragDiv({ resize:'middle',//拖拽div的id left:'tree',//拖拽左侧菜单的id right:'content',//右侧内容区的id box:'dictionary',//父元素id minClientWidth:200,//左侧空间小多少像素//可以不传,默认200 maxClientWidth:600,//左侧空间最大多少像素//可以不传,默认600 }) } //原生调用 window.onload=function(){ dragDiv({ resize:'middle',//拖拽div的id left:'tree',//拖拽左侧菜单的id right:'content',//右侧内容区的id box:'dictionary',//父元素id minClientWidth:200,//左侧空间小多少像素//可以不传,默认200 maxClientWidth:600,//左侧空间最大多少像素//可以不传,默认600 }) }; //... `这样就配置完成了` 查看效果--->
源码 github
效果 malunan的blog
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。