vue-admin-template左侧导航栏

最新推荐文章于 2024-09-03 09:02:54 发布
最新推荐文章于 2024-09-03 09:02:54 发布
阅读量3.4k 收藏 5
点赞数 1
分类专栏： vue 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43887108/article/details/105877117
版权
本文介绍如何在vue-admin-template中控制左侧导航栏的logo显示与隐藏。作者将sidebarLogo状态置于vuex，并通过全局配置文件进行设置。在store/app.js中调整OPEN_SIDEBAR和CLOSE_SIDEBAR的mutations，以及新增ACTION来实现导航栏的显示和隐藏功能。
摘要由CSDN通过智能技术生成

vue-admin-template左侧导航logo显示隐藏
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
作者封装了左侧栏将sidebarlogo 放到了vuex里 然后通过一个全局配置的文件去设置logo是否显示

在这里插入图片描述
在这里插入图片描述
设置为true logo就出来了。

如何隐藏左侧导航

在这里插入图片描述
找到store文件里的 app.js
在这里插入图片描述
mutations方法里面OPEN_SIDEBAR 打开左侧导航栏，CLOSE_SIDEBAR 关闭左侧导航栏
ACTIONS方法也加多一个
在这里插入图片描述
然后在想要显示隐藏的地方用就可以了
在这里插入图片描述

最低0.47元/天 解锁文章
！YYYJM
关注
专栏目录
vue 上下滚动的菜单_vue实现广告栏上下滚动效果
weixin_36307344的博客
12-23 512
本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码，供大家参考，具体内容如下html部分 {{item.name}}抢得商品{{item.goods}}已有123人申请js部分data () {return {msg: [{name: '张**',goods: '牙膏'},{name: '王**',goods: '牙刷'},{name: '钟**',goods: '肥皂'}],animat...
vue-admin-template配置快捷导航的代码（标签导航栏）
12-28
vue-element-admin有关快捷导航说明 1、添加标签 @/layout/components/AppMain.vue添加： <!-- 新增 --> <!-- 新增 --> </secti
vue-admin-template 修改侧边栏
b2357666846的博客
04-25 2762
(1) 注册路由 router.js---->添加或更改测边框的模块 注意：模块的路径 (2) 在Views文件下增加相应的模块.vue (3) 在 conponents文件夹下index.vue 增加或修改相应的模块路径 注意：vue代码 区分大小写 转载于:https://www.cnblogs.com/luckHuang/p/10767141.html...
Vue Admin Template 使用教程
最新发布
gitblog_00243的博客
09-03 765
Vue Admin Template 使用教程 vue-admin-templateVue 轻量级后台管理系统基础模板项目地址:https://gitcode.com/gh_mirrors/vue/vue-admin-template 1. 项目的目录结构及介绍 vue-admin-template/ ├── public/ # 静态资源文件夹 │ ├── ...
使用vue-element-admin框架，刷新路由导致左侧导航栏菜单消失解决办法
Cody_LC的博客
07-28 1233
vue框架
vue-element-admin刷新侧边栏数据丢失
Stitch_xiao的博客
06-02 1088
解决vue-element-admin刷新侧边栏丢失
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue-admin-template-master.zip
01-08
"vue-admin-template-master"中可能包含了各种预定义的组件，如表格、表单、导航栏等。 3. **指令系统**：Vue.js提供了一些预定义的指令，如`v-if`、`v-for`、`v-bind`等，它们是增强HTML的特殊属性，用于处理DOM的...
vue-element-admin只有一个子路由，不显示侧边栏
yttqq的博客
02-17 1360
vue-element-admin只有一个子路由，不显示侧边栏
vue-admin 完全隐藏掉左侧菜单栏
smxr
10-28 2373
在 src/styles/sidebar.scss文件中修改第一个 .hideSidebar .hideSidebar { .sidebar-container,.sidebar-container .el-menu { width: 36px!important; margin-left: -3%;//新曾经这个就可以在点击隐藏按钮时完全隐藏左侧菜单栏 } .main-container { margin-left: 36px; .
vue-admin-template侧边栏修改成抽屉式
Qxn530的博客
12-12 1506
把组件sidebar改成drawer
vue-element-admin左侧菜单栏隐藏功能去除修改
weixin_43839438的博客
04-19 8880
因为项目头部引用是别人的头部，所以导致菜单栏左侧自动隐藏菜单功能会对页面操作造成一定影响，无法自动展开。所以把左侧菜单栏隐藏菜单功能隐藏掉，这里做一个记录； 直接修改中央仓库store>modules>app.js 里的 opened属性改为true ...
vue-admin-template左侧点击刷新
kogwang的博客
01-14 373
@/layout/components/Sidebar/Link.vue <template> <!-- eslint-disable vue/require-component-is --> <component v-bind="linkProps(to)"> <slot /> </component> </template> <script> import { isExternal } from
VUE 自定义左侧菜单
℡メ㏑╭ァ小凯
06-07 2045
效果图 CustomLeftMenu.vue 右边浮动大白块，分页模式显示二级、三级菜单 index.vue一级菜单+二级菜单 最外层调用，给菜单传数据
vue-element-admin 隐藏侧边栏
LittleLittleup的博客
05-14 2741
参考https://blog.csdn.net/weixin_48508049/article/details/114018306 在 src/style/sidebar.scss 里搜索hideSidebar找到以下部分 .hideSidebar { .sidebar-container { width: 54px !important; } .main-container { margin-left: 54px; } 修改为 .side
vue-admin-template 记录 自定义路由及自定义侧边栏的实现
爱分享的小猿
10-16 513
vue-admin-template 路由 自定义侧边栏
vue element 侧边栏子菜单全部显示
半梅芒果干的博客
04-25 796
参考文档：https://element.eleme.cn/#/zh-CN/component/menu default-openeds：把需要展开的放到数组中
vue-element-admin 修改左上角系统名称和logo
weixin_43870916的博客
03-15 7487
修改 src/layout/components/Sidebar/Logo.vue data() { return { title: '系统名称', logo: 'logo地址' } }
vue-admin-template 导航栏修改hover
03-29
要修改 vue-admin-template 中的导航栏 hover 样式，可以按照以下步骤操作： 1. 打开 `src/styles/element-variables.scss` 文件，找到 `$--color-primary-hover` 变量，将其值修改为你想要的颜色值。 2. 打开 `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值