vue 左侧菜单可拖动

<template><div class="box" ref="box"><div class="left"><!--左侧div内容--></div><div class="resize" title="收缩侧边栏">⋮</div><div class="mid"><!--右侧div内容--></div></div>
</template>
<script>
export default {data() {return {};},mounted() {this.dragControllerDiv();},methods: {dragControllerDiv() {var resize = document.getElementsByClassName("resize");var left = document.getElementsByClassName("left");var mid = document.getElementsByClassName("mid");var box = document.getElementsByClassName("box");for (let i = 0; i < resize.length; i++) {// 鼠标按下事件resize[i].onmousedown = function (e) {//颜色改变提醒resize[i].style.background = "#818181";var startX = e.clientX;resize[i].left = resize[i].offsetLeft;// 鼠标拖动事件document.onmousemove = function (e) {var endX = e.clientX;var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32pxif (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150pxresize[i].style.left = moveLen; // 设置左侧区域的宽度for (let j = 0; j < left.length; j++) {left[j].style.width = moveLen + "px";mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";}};// 鼠标松开事件document.onmouseup = function (evt) {//颜色恢复resize[i].style.background = "#d6d6d6";document.onmousemove = null;document.onmouseup = null;resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉};resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获return false;};}},},
};
</script><style scoped>
/* 拖拽相关样式 */
/*包围div样式*/
.box {width: 100%;height: 100%;margin: 1% 0px;overflow: hidden;box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {width: calc(32% - 10px); /*左侧初始化宽度*/height: 100%;background: #ffffff;float: left;
}
/*拖拽区div样式*/
.resize {cursor: col-resize;float: left;position: relative;top: 45%;background-color: #d6d6d6;border-radius: 5px;margin-top: -10px;width: 10px;height: 50px;background-size: cover;background-position: center;/*z-index: 99999;*/font-size: 32px;color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {color: #444444;
}
/*右侧div'样式*/
.mid {float: left;width: 68%; /*右侧初始化宽度*/height: 100%;background: #fff;box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);min-height: 500px;min-width: 500px;
}
</style>

vue 左侧菜单可拖动相关推荐

html 左侧树形菜单,vue左侧菜单,树形图递归实现代码
学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递.也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 效果图如下所示: ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码
vue点击切换显示隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ backg ...
Vue开发实例（11）之el-menu实现左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
vue element html左侧菜单,vue生成element左侧菜单
首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据 ...
vue首页导航+左侧菜单
目录 1. Mock.js:是什么? 2. Mock.js使用步骤 3. 后台首页AppMain.vue的创建 1. Mock.js:是什么? 1,前后端分离之后,前端迫切需要一种机制,不再需要依赖 ...
vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
SPA项目开发之首页导航+左侧菜单
一:mock.js模拟响应ajax请求 1.安装mockjs依赖 npm install mockjs -D #只在开发环境使用 2.配置开发环境及生产环境为了 ...

vue 左侧菜单可拖动

vue 左侧菜单可拖动

vue 左侧菜单可拖动相关推荐

最新文章

热门文章