修改vue-element-admin 中侧边栏图标

情景:
原本的vue-element-admin模板上图标太少,我想再引入几个,我按照网上方法去iconfont官方库里去下载svg的图片然后放到src/icons/svg目录下面,显示了是显示了,但是比正常的图标尺寸小,修改大小也不好修改

解决办法:
我把展示的svg换成elementUI库里的图标
1 找到这个目录下的这个vue 文件
在这里插入图片描述
2 注释掉这行代码,代表只选用icon的图标不会用svg的
在这里插入图片描述
3 这样我们在使用图标的时候只用写icon的名字即可,比如

	{
	path:'/home',
	component:Layout,
	meta:{
			 title:'资源管理',
			 icon:'el-icon-s-management'
	}
	}
### 实现侧边栏折叠功能 在 `vue-element-admin` 项目中,实现侧边栏折叠的功能主要涉及修改状态管理以及相应组件的样式变化。为了达到这一目的,通常会在 Vuex store 中创建一个布尔类型的 state 变量来控制侧边栏的状态。 对于侧边栏的显示逻辑,可以在布局文件(通常是 `Layout.vue` 文件)中引入并监听此变量的变化: ```html <template> <div :class="{'hide-side-bar': isSideBarFolded}"> <!-- Side bar component --> <sidebar v-if="!isSideBarFolded"></sidebar> <!-- Main content area --> <main-content></main-content> </div> </template> <script lang="ts"> import { computed } from "vue"; import { useStore } from "@/store"; export default { setup() { const store = useStore(); let isSideBarFolded = computed(() => store.getters.sidebarOpened); function toggleSidebar() { store.dispatch('toggleSideBar'); } return { isSideBarFolded, toggleSidebar }; } }; </script> <style scoped> .hide-side-bar .side-bar { display: none; } /* Other styles */ </style> ``` 上述代码展示了如何利用计算属性绑定侧边栏可见性的 CSS 类,并提供了一个方法用于触发 Vuex action 改变侧边栏的状态[^3]。 此外,在 Vuex Store 配置里需定义相应的 getter 和 mutation/action 对应的操作: ```javascript const mutations = { TOGGLE_SIDEBAR(state) { state.sideBarOpen = !state.sideBarOpen; }, }; const actions = { toggleSideBar({ commit }) { commit('TOGGLE_SIDEBAR'); }, }; const getters = { sidebarOpened: (state) => state.sideBarOpen, }; ``` 最后,为了让用户能够交互地操作侧边栏开关按钮,可在导航栏或其他合适位置放置一个按钮调用 `toggleSidebar()` 函数完成实际的动作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值