一看就会，超有用活字格技能：一百九十七、EL-导航菜单数据表图标随文字颜色

收藏

本帖最后由 Grayson.Shang 于 2024-5-10 18:41 编辑

相信菜单大家应该都不陌生吧，一个好看的UI离不开一个好看的菜单
炫酷导航菜单.gif268829650.png

网络图片（来源：html实现好看的多种风格导航菜单(附源码)_html导航-CSDN博客）

活字格8.0发布的插件包，Element UI Plus，提供了比较丰富的UI模块，极大程度上丰富了我们页面的UI布局，今天提到的是咱们EL-导航菜单。

EL-导航菜单有这样一种设计，给菜单配置固定的菜单项，可以给每一个菜单设置不同的图片，这里的图标可以选择SVG，然后设置图标的颜色跟随字体的颜色
image.png331580809.png

不过有时我们需要将我们的菜单设置成动态的，即将菜单项存储在数据表中，通过权限的方式对菜单项进行控制的时候，我们的图标就要来源于我们的数据表了，那来自于数据表的数据，就做不了前面提到的设置了。我们只能在数据源中选择使用数据源的哪一个字段作为图标。
image.png296896971.png

那么今天了给大家带来一种设计，即使通过数据源的方式，也可以做到像固定菜单配置的一样，可以让图标跟随字体颜色

前提：想要出现可以变色的图标，图片必须要是SVG的，其他类型的图片是不行的

这里图片存储的方式分为两种，都是可以正常在菜单中展示，并达成效果的
1. 通过图片上传单元格上传的SVG图片，图片本身保存在文件服务器，文件名存储在数据表中
image.png55227965.png

2. 通过设计器的图片资源管理上传的SVG，图片本身保存在应用服务器，网络路径存储在数据表中
image.png898425903.png

第一种方式，我就不做过多解释，大家应该都会使用，我这里讲解一下如何获取第二种方式，
第二种方式，其实也比较常用，存储在数据库中，我们就在页面做一个数据上传的的操作，其实向图片资源中导入图片也是一种很方便的方式。（这里的网络路径只是在活字格中访问，不是HTTP的网络路径）

获取设计器中上传图片的网络路径：
活字格的JS中提供一个接口，可以获取到图片的网络路径
image.png321187743.png

具体的路径信息是固定是：

/Forguncy/GeneratedResources/Images/GenerateImages/ImageCellType/

这样我们数据表中展示的图片已经讲解完成了

如果咱们菜单图片可能存在混合使用，那么建议第二种方式存储使用全路径
image.png849149474.png

若是只有第二种方式，可以只在图片字段存储图片名称，然后使用公式字段拼接全路径

给菜单设置好数据源
image.png967582092.png

具体的展示效果如下：（图标使用自己本身的颜色，和字体不同色）
image.png696214294.png

通过在页面上调试，我们可以了解到，SVG的颜色其实依赖于，每一个组合图中的fill属性
image.png670231628.png

那么我们只需要修改一下这些图标的颜色即可，这里有一个关键字，currentColor，可以使图标颜色和字体颜色保持一致

具体设置如下：
1、给需要修改颜色的菜单增加CSS Class，我这边设置“svgColorTest”
image.png368137816.png

2、在工程文件中新建一个Javascript文件，加入如下代码完成CSS样式修改
image.png978700256.png

Forguncy.Page.bind("pageDefaultDataLoaded", function (arg1, arg2) {
$(".svgColorTest path").css("fill", "currentColor")
});

复制代码

这里需要将修改CSS样式的JS放在页面加载完成之后的事件中，否则会出现，文字的颜色还没有生效，图标颜色已经设置完成。

经过格友反馈，若是引用设计器上传的内置图片，数据库中附件的存储路径，在发布之后，并不能正常生效，因为存储路径的根节点是应用的应用名，而应用名本身又是可以动态变化的，数据库中的数据又不能动态变化。

我这边分析了一下，若是想要随着发布不同的应用，以及设计器也可以正常的使用，那么在存储文件路径的时候，就不能将应用名存储到数据表中，而是存储文件其他部分的路径
image.png999546813.png

然后再在页面加载的时候，根据发布应用的应用名拼接完整的路径，具体参考如下
image.png181364745.png

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：一百九十七、EL-导航菜单数据表图标随文字颜色

0 个回复

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证