后台管理左侧菜单栏图标设置

通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标
在数据中添加一个iconsObj：

//template中：
<i :class="iconsObj[item.id]"></i>//js的data中定义
iconsObj: {'125':'iconfont icon-user','103':'iconfont icon-tijikongjian','101':'iconfont icon-shangpin','102':'iconfont icon-danju','145':'iconfont icon-baobiao'}

图标不同循环的菜单不能一一添加，类名动态绑定，通过对应id获取（对应数据在data中）。然后将图标类名进行数据绑定，绑定iconsObj中的数据：

后台管理左侧菜单栏图标设置相关推荐

Django admin后台管理页面的常用设置
Django admin后台管理页面的常用设置选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
前端学习（2710）：重读vue电商网站30之左侧菜单栏图标设计
我们想要的效果如下: 如何设计? 首先,我们可以在 data 中定义一个对象,对应于每一个菜单选项的 id 然后通过 for 循环遍历每一个菜单选项的 id即可.
前端学习（2711）：重读vue电商网站31之左侧菜单栏图标设计
保持一个子菜单的展开直接在侧边栏区域添加上述属性即可
tomcat7查看后台管理怎么设置用户名和密码
tomcat7 看看后台管理的页面,设置也是非常简单的,井道 conf/tomcat-users.xml 文件 <role rolename="tomcat"/> ...
php后台幻灯片管理,制作后台管理界面、在线编辑器幻灯片.ppt
制作后台管理界面.在线编辑器幻灯片制作后台管理界面在线编辑器后台管理界面接PPT17(设置IIS,建立站点) 1.将压缩文件ewebeditor.rar放在admin中 2.右键eweb ...
b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: e.g.点击二级菜单用户列表,就会跳转到用户列表对应的index的地址(用户 ...
管理“我的右上角” : 介绍菜单栏图标软件 Bartender
为什么80%的码农都做不了架构师?>>> 简洁控必备利器 Bartender 在苹果电脑中,有很多软件都会在菜单栏上设置一个图标,通过点击图标,可以快速地进行某些操作.但是菜单 ...
后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...

后台管理左侧菜单栏图标设置

后台管理左侧菜单栏图标设置相关推荐

最新文章

热门文章