vue实现伸缩菜单功能

先看效果：

点击图片按钮可调整菜单宽度

伸缩后

页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。

我这里定义的分别是box、left、mid、resize(按钮类名)

html

页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的）

/*拖拽区div样式*/
.resize {cursor: col-resize;position: relative;// top: 45%;top: 400px;background-color: #d6d6d6;border-radius: 5px;margin-top: -10px;width: 10px;height: 50px;background-size: cover;background-position: center;font-size: 32px;color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {color: #444444;
}
//左侧菜单设置百分比宽度，方便拖拽自适应
.main_menu {width:22%; /*右侧初始化宽度*/height: 100%;background: #BF334E!important;box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.11);
}

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.clientXresize[i].left = resize[i].offsetLeft// 鼠标拖动事件document.onmousemove = function (e) {console.log('鼠标按下')var endX = e.clientXvar moveLen = resize[i].left + (endX - startX - 270) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度var maxT = box[i].clientWidth - resize[i].offsetWidth - 270// 容器宽度 - 左边区域的宽度 = 右边区域的宽度console.log(moveLen,maxT)if (moveLen < 32) moveLen = 270 // 左边区域的最小宽度为32pxif (moveLen > maxT - 150) moveLen = maxT - 650 //右边区域最小宽度为150pxresize[i].style.left = moveLen // 设置左侧区域的宽度for (let j = 0; j < left.length; j++) {console.log( left[j].style)left[j].style.width = moveLen + 'px'mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'}}// 鼠标松开事件document.onmouseup = function (evt) {console.log('鼠标收起')//颜色恢复resize[i].style.background = '#d6d6d6'document.onmousemove = nulldocument.onmouseup = nullresize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉}resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获return false}}},

mounted里面调用：

    mounted() {this.dragControllerDiv()},

vue实现伸缩菜单功能相关推荐

vue鼠标右键自定义菜单_vue-右键菜单功能
[TOC] >[success] # :-: vue-右键菜单功能 [在线demo点击我](https://xunleif2e.github.io/vue-context-menu/demo/d ...
使用Vue+Vue-router+el-menu实现菜单功能实战
前言上节回顾上一小节我们使用H5+CSS3实现了管理平台的架构布局,并且通过Vuex的使用,获取到前端数据本地化存储的username,绑定到右上角进行全局展示.还不了解上下文的同学可以回顾一下 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单例子首页 ...
html二级菜单显示与隐藏,Vue实现二级菜单的显示与隐藏
Vue实现二级菜单的显示与隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ b ...
vue暂存功能_示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. #Vue 实现组件信息的缓存当我 ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
php创建菜单_php实现微信公众号创建自定义菜单功能的实例代码
目的创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配 ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

vue实现伸缩菜单功能

先看效果：

html

页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的）

methods里面的拖拽函数：

mounted里面调用：

vue实现伸缩菜单功能相关推荐

最新文章

热门文章