vue实现伸缩菜单功能

本文实例为大家分享了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.clientX
                    resize[i].left = resize[i].offsetLeft
                    // 鼠标拖动事件
                    document.onmousemove = function (e) {
                        console.log('鼠标按下')
                        var endX = e.clientX
                        var 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 // 左边区域的最小宽度为32px
                        if (moveLen > maxT - 150) moveLen = maxT - 650 //右边区域最小宽度为150px
                        resize[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 = null
                        document.onmouseup = null
                        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                    }
                    resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
                    return false
                }
            }
        },

mounted里面调用:

mounted() {
         this.dragControllerDiv()
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏. 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满. 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及. 基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态.其中在父组

  • vue addRoutes实现动态权限路由菜单的示例

    需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果:根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别. 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了.接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现.

  • Vue.js 递归组件实现树形菜单(实例分享)

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • vue2.0实现导航菜单切换效果

    本文实例为大家分享了vue2.0实现导航菜单切换的具体代码,供大家参考,具体内容如下 css *{ margin:0; padding: 0; } ul li{ list-style: none; } .navul{ margin:100px auto 20px; overflow: hidden; } .navul li{ background-color: #5597b4; padding:18px 30px; float:left; color: #fff; font-size: 18px

  • vue2.0使用v-for循环制作多级嵌套菜单栏

    使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了. 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id

  • 基于vue.js实现侧边菜单栏

    侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • Vue实现导航栏菜单

    本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下 这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单. menu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏左</title> <link rel="stylesheet" href="css/

  • Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

随机推荐