vue-admin-template左侧菜单栏自由拉伸

最新推荐文章于 2023-10-12 15:54:54 发布
最新推荐文章于 2023-10-12 15:54:54 发布
阅读量1.5k 收藏 5
点赞数 1
文章标签： vue.js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46063825/article/details/118702472
版权

最近公司项目需求左侧菜单栏需要自由拉伸，本人小白一个，大神看到不要喷

1.首先找到layout/componments/SideBar/index.vue文件

2.修改这个index.vue文件

2.1将sidebar套上一层div，并将底下的main-container加上一个id

2.2开始写鼠标事件

2.3页面刷新，在created里面写方法，并引入Cookies

3.找到layout/componments/Navbar.vue这个文件并对其进行修改，修改这个文件主要是因为点击打开还是隐藏菜单栏方法在这里，引入cookies

 

然后就可以去试试可不可以拉伸了，这只是我自己琢磨出来的方法，如果有大神有更好更简洁的方法可以教教我

weixin_46063825
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
若依如何调整首页左侧菜单栏宽度？
猿小白的博客
12-22 3262
调整style.css对应样式宽度，例如宽度200修改成250 body.fixed-sidebar .navbar-static-side, body.canvas-menu .navbar-static-side { width: 250px; } nav .logo { width: 250px; } #page-wrapper { margin: 0 0 0 250px; }
详解使用vue-admin-template的优化历程
08-27
使用 Vue-Admin-Template 优化历程详解 在本篇文章中，我们将详细介绍使用 Vue-Admin-Template 的优化历程。 Vue-Admin-Template 是一个基于 Vue.js 的后台管理系统模板，旨在提供一个快速、灵活、可扩展的解决方案...
resize 线条
Kill_paradise的博客
08-30 114
<template> <divclass="x-handle"unselectable="on"onselectstart="returnfalse"@mousedown="mouseDown"></div> </template> <script> exportdefault{ name:'XDragHandle', data(){ return{ lastX:'', ...
Vue - vue-admin-template模板项目改造：动态获取菜单路由
iotjin的专栏
04-27 1987
1、demo中的项目已经添加了TagsView功能和本地权限控制关于TagsViewVue - vue-admin-template模板项目改造：增加TagsView功能关于本地权限控制相关代码参考的permission-control分支2、并且demo中的项目在1的基础上增加TopHeader（顶栏）功能，在顶栏中显示项目标题和用户信息，即可以支持原有方式展示，又可以通过setting配置显示顶栏关于增加TopHeader（顶栏）
vue-admin-template 删除侧边栏
jidushanzhu的博客
05-21 2009
【问题】就想用vue-admin-template的单一网页，去除不需要的侧边栏，还有导航栏上调出侧边栏的按钮 【解决办法】原图 文件目录vue-admin-template-master/style/sidebar.scss中修改如下， ////原 .hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px
vue 左侧菜单可拖动
weixin_55903841的博客
08-08 681
vue 左侧菜单可拖动。
【Vue3】鼠标快速拖拽时，mouseleave\mouseMove事件失效，菜单等拖拽改变大小不灵活
最新发布
yuanyuan1995的博客
10-12 1596
找了资料发现，当鼠标离开绑定了mouse系列事件的组件之后，会终止拖拽事件。所以需要将mousemove绑定在一个足够大的父容器上才能继续生效，哪里还有比window更大的呢。拖拽改变左侧侧边栏的宽度，按照下面的写法，必须得缓慢的一点点拖拽才能改变大小，很难用而且左右拖拽不灵活。中间我还尝试了用document.mousemove，效果没啥差别，不好用。
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
vue-admin-template-4.4.0.zip
03-01
4. **Vue-admin-template**：这个模板可能包含了一些常见的后台管理界面元素，如表格、表单、图表、分页、多级菜单等。它可能已经预配置了axios库用于HTTP请求，Element UI或Ant Design Vue等UI组件库，以及Vue ...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
Vue-admin-template是基于Vue.js的一个后台管理系统模板，它提供了一个快速开发后台应用的基础架构。这个模板通常包含路由、组件、状态管理（Vuex）以及API调用等核心功能，极大地简化了开发流程。 在“学习vue-...
AdminLTE框架代码实现折叠左侧边栏
03-12
AdminLTE框架应用比较普遍，本文通过js代码实现控制左边框的显示与隐藏。
vue-admin-template配置快捷导航的代码（标签导航栏）
10-14
主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue-element-admin 左侧菜单增加可拉伸收缩
Dream
12-11 3297
有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能 目录slidebar增加拖拽点增加动态style增加计算属性barWidth监听拖拽点 slidebar增加拖拽点 增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽 split-panel样式： #split-panel { cursor: col-resize; height: 100%; width.
vue拖拽
xiao白的博客
05-09 390
js 代码 在methos // 模块拖拽事件 move(e) { let Module = e.target; //获取目标元素 let _this = this; //算出鼠标相对元素的位置 let disX = e.clientX - Module.offsetLeft; let disY = e.clientY - Mo...
vue中实现拖动调整左右两侧div的宽度
热门推荐
weixin_48398799的博客
05-08 1万+
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 一、HTML代码 <templete> <div class="box" ref="box"> <div class="left"> <!--左侧div内容--> </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="m.
手把手带你用vue-admin-template实现动态权限管理（二）
qq_36050563的博客
01-26 2389
手把手带你用vue-admin-template实现动态权限管理（二） 前言 手把手带你用vue-admin-template实现动态权限管理（一）如果没有看过上一篇文章的同学，建议看一下上一篇文章。 前期储备 本项目技术栈node.js、express、mysql 本节目标 要实现动态权限让后台返回，那势必需要将路由表存入到数据库。现在项目中一般采用的是前后端分离的模式，你跑过去跟你们的后台java、php开发人员说一通他不一定听的懂。所以这节我们就通过node.js、express、mysql实现权限表
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
qq_43468165的博客
02-08 3766
项目结构如下： 布局实现的代码段 <template> <a-layout> <a-layout-sider v-model="collapsed" :trigger="null" collapsible class="app-sider" > <div class="logo-box"></div> <SideMenu :openCurr.
vue+mousemove实现拖动，鼠标移动过快拖动就失效
weixin_30906671的博客
08-24 2150
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了； 搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码： 只能慢速拖动的代码： <!DOCTYPE html> <html> <head> <title>vue结合原生...
vue中实现拖动调整左右两侧div的宽度，解决iframe内嵌页面操作的卡顿问题
qian_li_hui的博客
10-19 1009
vue中实现拖动调整左右两侧div的宽度，解决iframe内嵌页面操作的卡顿问题
vue-antd-admin左侧菜单栏标题图标
07-25
- *1* *2* *3* [vue-admin-template笔记（六）](https://blog.csdn.net/seedcup/article/details/85013024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值