快捷搜索: 王者荣耀 脱发

layuimini 图标颜色便捷指定

layuimini 后台图片默认都是没有颜色。为了美观做了修改,可以在菜单初始化的时候就渲染好图标的颜色

第一步 修改miniMenu.js文件

一:

renderLeftMenu :function(leftMenus,options){
          
   
            options = options || {
          
   };
            var me = this ;
            var leftMenusHtml =  me.each(leftMenus || [],function (idx,leftMenu) {
          
    // 左侧菜单遍历
                var children = me.renderChildrenMenu(leftMenu.child, {
          
    childOpenClass:options.childOpenClass });
                var leftMenuHtml = me.compileMenu({
          
   
                    href: leftMenu.href,
                    target: leftMenu.target,
                    childOpenClass: options.childOpenClass,
                    icon: leftMenu.icon,
                    title: leftMenu.title,
                    children: children,
                    className: ,
                    //增加该行代码
                    iconColor:leftMenu.icon.split(" ").length>=3?leftMenu.icon.split(" ")[2]:
                });
                return leftMenuHtml ;
            }).join("");

            leftMenusHtml = me.compileMenuContainer({
          
    id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
            return leftMenusHtml ;
        },

二:修改compileMenu函数 将i标签模板修改成如下形式

<i class="{
          
   {d.icon}}" {
          
   {
          
   #if(d.iconColor){
          
   }} style="color: {
          
   {d.iconColor}}"{
          
   {
          
   #}}}></i>

使用:

在添加菜单的时候 在icon字段内容 最后面添加指定颜色即可。

{
          
   
          "title": "错误日志",
          "icon": "fa fa-file-text-o red",
          "href": "",
          "target": "_blank"
 }
经验分享 程序员 微信小程序 职场和发展