随手记：若依后台系统部分页面调整padding，调整左侧菜单缩放

已于 2024-01-31 17:08:50 修改
阅读量280 收藏 1
点赞数 1
文章标签： 前端 javascript html
于 2024-01-31 17:06:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63515766/article/details/135957750
版权

代码

if(this.$route.path == '/order/transaction/printLabel') {
        this.appMainPdding = '0px';
        this.$store.dispatch('app/toggleSideBarHide', true);
        document.querySelector('.navbar').style.display = 'none';
        document.querySelector('.tags-view-container').style.display = 'none';
        document.querySelector('.sidebar-container').style.display = 'none';
        // document.querySelector('.main-container').style.marginLeft = '0px';
      }else{
        this.appMainPdding = '20px';
        this.$store.dispatch('app/toggleSideBarHide', false);
        document.querySelector('.navbar').style.display = 'block';
        document.querySelector('.tags-view-container').style.display = 'block';
        document.querySelector('.sidebar-container').style.display = 'block';
        // document.querySelector('.main-container').style.marginLeft = '200px';
      }
peachSoda7
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
若依系统侧边菜单实现可拖拽宽度
xiaoxuya_的博客
04-15 559
前端若依框架菜单可拖拽宽度
ruoyi框架修改左侧菜单样式
renkai721的专栏
09-22 4465
vue修改菜单样式，element修改菜单样式,ruoyi框架修改菜单样式
若依前后端分离，左侧菜单栏动态更新
最新发布
m0_62011397的博客
05-19 333
所以写一个刷新菜单的方法，调用这个路由方法，然后在每次点击确定按钮后去执行这个方法。我在修改若依菜单管理后，返现左侧菜单栏不会动态刷新，每次都要刷新页面才会生效。先去控制台找找，有没有一个接口是获取左边菜单栏，我觉得不会是写死的。具体的router方法我就不贴了，因为太菜，我也没看懂路由方法。然后去找到菜单管理页面，他不管修改、新增，都要点击确定按钮。发现是router接口，再去代码全局搜索找这个方法。磨磨蹭蹭找了一天，终于找到了；希望对你们有帮助吧。
vue-admin-template左侧菜单栏自由拉伸
weixin_46063825的博客
07-13 1579
最近公司项目需求左侧菜单栏需要自由拉伸，本人小白一个，大神看到不要喷 1.首先找到layout/componments/SideBar/index.vue文件 2.修改这个index.vue文件 2.1将sidebar套上一层div，并将底下的main-container加上一个id 2.2开始写鼠标事件 2.3页面刷新，在created里面写方法 3.找到layout/componments/Navbar.vue这个文件并对其进行修改，修改这个文件主要是因为点击打开还是隐藏菜单栏方
若依框架模态框拖拽，拖拉改变弹框高度宽度
Shuai_YeYe的博客
01-04 1055
模态框拖拽、改变宽度高度
ruoyi菜单折叠，菜单收缩
renkai721的专栏
09-22 1516
vue菜单收缩,vue菜单折叠,element菜单折叠,element菜单收缩，点击按钮收缩菜单
若依框架隐藏侧边导航栏
Yly147的博客
09-06 3705
若依框架隐藏侧边导航栏
若依框架---如何实现翻页保留选择？如何调整首页左侧菜单栏宽度？
02-21 1232
如何实现翻页保留选择？如何调整首页左侧菜单栏宽度？
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
我这孩子从小记性就不好，什么东西都要写下来才放心
06-21 8811
【代码】若依(ruoyi)前端Vue3 Element Plus Vite版样式修改。
若依前后端分离样式修改
byca_writebug的博客
06-03 1365
最后直接通过$base-sub-menu-color-active就可以调用新增的属性。可以先在variables.scss中新增。修改侧边栏首页栏选中后的字体颜色。修改侧边栏子菜单选中后的字体颜色。其中首页跟子菜单的样式是新增的。修改选中后的背景色以及背景边框。
vue-admin-template侧边栏修改成抽屉式
Qxn530的博客
12-12 1420
把组件sidebar改成drawer
学习vue后台管理框架4(主体)
hanker的博客
03-07 1460
<template> <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}"> <sidebar class="sidebar-container"></sidebar> <div class="mai
若依后台管理系统，点击全屏的时候，隐藏头部和左侧菜单栏
半兽先生的博客
04-13 1386
1.首先在mounted写一个全屏监听事件。2.methods写事件。
修改若依框架的侧边栏、导航栏、面包屑样式和全局页面样式的方法详解
pleaseprintf的博客
06-30 1万+
若依框架是一款基于 Vue.js 的开源后台管理系统框架，它提供了丰富的组件和布局样式。本文将详细介绍如何修改若依框架中的侧边栏、导航栏、面包屑样式以及全局页面样式，帮助你个性化定制开发中的左边导航栏和页面样式。通过以上步骤，你可以根据自己的需求修改若依框架中的侧边栏、导航栏、面包屑样式以及全局页面样式，实现个性化定制。希望本文对你在开发中修改若依框架的左边导航栏和页面样式有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
若依ruoyi侧边导航栏取消折叠功能
爬楼梯的前端小白的博客
04-27 1298
【代码】若依侧边导航栏取消折叠功能。
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:'', ...
若依框架调整左侧导航栏宽度
傲骨雄风的博客
09-02 3257
若依
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
热门推荐
Sabrina_cc的博客
07-20 7万+
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
基于若依框架（前后端分离）-新写前端Vue页面
weixin_45805749的博客
03-31 1271
基于若依框架（前后端分离）-新写前端Vue页面
vue后台管理系统左侧菜单实现动态添加和删除，我需要看到代码
04-15
好的，请稍等，我正在获取相关代码。 以下是一个简单的示例代码，仅供参考： 1. 定义菜单数据结构 ```javascript const menuData = [ { id: '1', title: '仪表盘', icon: 'dashboard', path: '/dashboard', }, { id: '2', title: '文章管理', icon: 'file-text', path: '/articles', }, { id: '3', title: '用户管理', icon: 'user', path: '/users', }, ] ``` 2. 使用Vue动态绑定数据生成菜单 ```html <template> <div class="menu-container"> <el-menu :default-active="activePath" :collapse="collapsed" :unique-opened="true" router > <el-submenu v-for="menuItem in menuList" :key="menuItem.id" :index="menuItem.path"> <template v-if="menuItem.children"> <span slot="title"> <i :class="'el-icon-' + menuItem.icon"></i> <span>{{ menuItem.title }}</span> </span> <el-menu-item v-for="subMenuItem in menuItem.children" :key="subMenuItem.path" :index="subMenuItem.path"> {{ subMenuItem.title }} </el-menu-item> </template> <template v-else> <el-menu-item :index="menuItem.path"> <i :class="'el-icon-' + menuItem.icon"></i> <span>{{ menuItem.title }}</span> </el-menu-item> </template> </el-submenu> </el-menu> </div> </template> <script> export default { name: 'Menu', data() { return { menuList: [], activePath: '', } }, created() { // 获取菜单数据 this.menuList = menuData // 设置默认激活的菜单项 this.activePath = this.$route.path }, watch: { // 监听路由变化，切换激活的菜单项 $route(to) { this.activePath = to.path }, }, } </script> <style scoped> .menu-container { padding: 20px; } </style> ``` 3. 实现动态添加和删除菜单项 ```javascript export default { // ... methods: { addMenuItem() { const newItem = { id: '4', title: '新菜单项', icon: 'star-on', path: '/new-item', } this.menuList.push(newItem) }, removeMenuItem() { const removedItem = this.menuList.pop() console.log(`已删除菜单项：${removedItem.title}`) }, }, } ``` 在上述代码中，`addMenuItem` 方法用于在菜单列表末尾添加一个新的菜单项，`removeMenuItem` 方法用于从菜单列表末尾删除一个菜单项。您可以根据自己的需求修改这些方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

peachSoda7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值