vue-element-admin 之设置侧边栏的icon

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量2.9k 收藏
点赞数 1
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/corgisyj/p/11365663.html
版权

一、将icon的svg文件放置如下图文件位置

二、在路由设置中设置（icon设置为svg的文件名称即可）

        

注：若icon选中的颜色不会随着侧边栏文字颜色变动，把svg文件中的fill去掉即可

 

转载于:https://www.cnblogs.com/corgisyj/p/11365663.html

digu9435
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题
u013998349的博客
11-28 1万+
vue-element-admin中设置icon图标一、引入图标ICON：二、使用步骤1.src/router/index.js参考资料： 一、引入图标ICON： https://www.iconfont.cn/ 可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。 二、使用步骤 1.src/router/index.js 直接在meta: { title: ‘主页’, icon: ‘dashb
vue-element-admin 隐藏侧边栏
LittleLittleup的博客
05-14 2611
参考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-element-admin之修改侧边栏的icon图标
weixin_40571937的博客
08-05 5571
修改侧边栏的icon图标 如果在vue-element-admin官方提供的icon库中没有我们需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 1. 在vue-element-admin官方提供的icon库中找图标。 在vue-element-admin指南中可以看到这句话，我们来实际操作一波 2. 在iconfont网站上 在图标仓库里可以搜索我们需要的图标 把我们下载的icon图标的svg文件复制到/src/icons/svg文件夹下 在如图所示，
vue项目自定义左边菜单栏图标icon
donghua201的博客
09-28 848
通过iconfont来转化成代码，添加类使用。
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 23万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
vue-element-admin 左侧Logo和名称的显示
zhangtongxueya的博客
08-11 824
名称
【Abp VNext】实战入门（五）：【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制
刘永洪的博客
02-28 3412
一、前言： 使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小，今天就记录一下如何操作。 二、操作步骤： 去阿里图标库查找需要的图标，然后下载对应的SVG文件：www.iconfont.cn 把.svg文件拷贝到项目根目录：icons/svg 在路由router/index.js 中配置新增的svg图标名：meta:{icon:‘home’} 这样处理后已经可以在左侧菜单中显示对应图标了，但是有三个问题要解决： 自定义图标太小不受控制：自定义图
Vue 自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式
山山而川~
01-02 1541
自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式
vue-element-admin 集成框架设置中文语言
11-10
vue-element-admin 集成框架中文版本
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-element-admin-4.4.0.zip
03-01
vue-element-admin-4.4.0.zip
vue-element-admin 精简版
03-03
减少冗余组件，保留基本框架以及设置和头部栏。
vue3-element-admin:vue-element-admin的vue3版本
03-08
English ||| 由...赞助 活动服务销售平台客户消息直达工作群介绍是用于管理界面的可... 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 该项目不支持低版本的浏览器（例如IE）。 请自行添加polyfill。准备
【Vue3】elementPlus图标和自定义侧边栏图标
Qxn530的博客
09-15 7553
elementPlus图标和自定义图标，具体示例为自定义侧边栏图标、vite+vue3+ts中使用自定义图标
从vue-element-admin框架中，学习如何优雅地使用icon
qq_26780317的博客
09-18 1915
前言： 本文主要记录一下，从vue-element-admin框架中，学习到使用icon的经验。希望以后，可以运用到自己的项目中。 一、前端icon的发展史       在远古时代，大部分图表都是用img来实现的。这样会使一个页面的请求资源中，图片img占了大部分，为了优化有了image sprite就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用css的background-position定位显示不同的icon图标。  &nbs
vue-element-admin使用第三方图标库
丸子酱
07-26 9650
1.打开页面。 点击 2.新建项目 3这个时候回到首页就可以添加到购物车了 一般需要自己一个一个点如果你想添加所有，请在控制台输入代码 var icons = document.querySelectorAll('.icon-gouwuche1'); var auto_click = function(i) { if (i < icons.length) { setTimeo...
【Vue】自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式
Qxn530的博客
09-09 1623
自定义侧边栏图标、并改变图标颜色、将图片转换为svg格式
vue-element-admin 侧边栏使用自己的图标
weixin_44896595的博客
10-15 1602
1、将你自己的svg文件放入，我这里的是src/icons/svg 2、直接打开，删除关于fill的一串代码，即可跟随变色
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1471
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
vue-element-admin侧边栏
05-09
Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。它提供了许多常用的后台管理功能和组件，包括侧边栏、面包屑导航、表格、表单、图表等等。 侧边栏是 Vue-element-admin 中的一个重要组件，它通常用于展示系统的菜单和功能项。在 Vue-element-admin 中，侧边栏是通过路由配置来生成的。 在路由配置中，每一个路由配置项对应着一个菜单项。菜单项包括菜单的标题、图标、路径、子菜单等信息。当用户点击菜单项时，就会跳转到对应的路由页面。 以下是一个简单的示例，演示如何使用 Vue-element-admin 的侧边栏组件： ```javascript // 路由配置 const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] } ] // 侧边栏组件 <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :key="index" :index="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </template> <template v-for="(subItem, subIndex) in item.children"> <el-menu-item :key="index + '-' + subIndex" :index="index + '-' + subIndex" @click="handleMenuClick(subItem)"> <i :class="subItem.icon"></i> <span slot="title">{{subItem.title}}</span> </el-menu-item> </template> </el-submenu> <el-menu-item v-else :key="index" :index="index" @click="handleMenuClick(item)"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuList: { type: Array, required: true }, activeIndex: { type: String, required: true }, isCollapse: { type: Boolean, required: true } }, methods: { handleMenuClick(item) { this.$emit('menu-click', item) } } } </script> ``` 在这个示例中，路由配置包含了三个路由项，分别对应 Dashboard、Table 和 Tree 三个菜单项。侧边栏组件则使用了 Element UI 中的 Menu 组件来展示菜单项。侧边栏组件的主要作用是传递菜单项列表、当前选中的菜单项和侧边栏是否折叠等参数，以及监听菜单项的点击事件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值