一看就会，超有用活字格技能：一百九十七、EL-导航菜单数据表图标随文字颜色
本帖最后由 Grayson.Shang 于 2024-5-10 18:41 编辑相信菜单大家应该都不陌生吧，一个好看的UI离不开一个好看的菜单
网络图片（来源：html实现好看的多种风格导航菜单(附源码)_html导航-CSDN博客）
活字格8.0发布的插件包，Element UI Plus，提供了比较丰富的UI模块，极大程度上丰富了我们页面的UI布局，今天提到的是咱们EL-导航菜单。
EL-导航菜单有这样一种设计，给菜单配置固定的菜单项，可以给每一个菜单设置不同的图片，这里的图标可以选择SVG，然后设置图标的颜色跟随字体的颜色
不过有时我们需要将我们的菜单设置成动态的，即将菜单项存储在数据表中，通过权限的方式对菜单项进行控制的时候，我们的图标就要来源于我们的数据表了，那来自于数据表的数据，就做不了前面提到的设置了。我们只能在数据源中选择使用数据源的哪一个字段作为图标。
那么今天了给大家带来一种设计，即使通过数据源的方式，也可以做到像固定菜单配置的一样，可以让图标跟随字体颜色
前提：想要出现可以变色的图标，图片必须要是SVG的，其他类型的图片是不行的
这里图片存储的方式分为两种，都是可以正常在菜单中展示，并达成效果的
1. 通过图片上传单元格上传的SVG图片，图片本身保存在文件服务器，文件名存储在数据表中
2. 通过设计器的图片资源管理上传的SVG，图片本身保存在应用服务器，网络路径存储在数据表中
第一种方式，我就不做过多解释，大家应该都会使用，我这里讲解一下如何获取第二种方式，
第二种方式，其实也比较常用，存储在数据库中，我们就在页面做一个数据上传的的操作，其实向图片资源中导入图片也是一种很方便的方式。（这里的网络路径只是在活字格中访问，不是HTTP的网络路径）
获取设计器中上传图片的网络路径：
活字格的JS中提供一个接口，可以获取到图片的网络路径
具体的路径信息是固定是：
/Forguncy/GeneratedResources/Images/GenerateImages/ImageCellType/
这样我们数据表中展示的图片已经讲解完成了
如果咱们菜单图片可能存在混合使用，那么建议第二种方式存储使用全路径
若是只有第二种方式，可以只在图片字段存储图片名称，然后使用公式字段拼接全路径
给菜单设置好数据源
具体的展示效果如下：（图标使用自己本身的颜色，和字体不同色）
通过在页面上调试，我们可以了解到，SVG的颜色其实依赖于，每一个组合图中的fill属性
那么我们只需要修改一下这些图标的颜色即可，这里有一个关键字，currentColor，可以使图标颜色和字体颜色保持一致
具体设置如下：
1、给需要修改颜色的菜单增加CSS Class，我这边设置“svgColorTest”
2、在工程文件中新建一个Javascript文件，加入如下代码完成CSS样式修改
Forguncy.Page.bind("pageDefaultDataLoaded", function (arg1, arg2) {
$(".svgColorTest path").css("fill", "currentColor")
});这里需要将修改CSS样式的JS放在页面加载完成之后的事件中，否则会出现，文字的颜色还没有生效，图标颜色已经设置完成。
经过格友反馈，若是引用设计器上传的内置图片，数据库中附件的存储路径，在发布之后，并不能正常生效，因为存储路径的根节点是应用的应用名，而应用名本身又是可以动态变化的，数据库中的数据又不能动态变化。
我这边分析了一下，若是想要随着发布不同的应用，以及设计器也可以正常的使用，那么在存储文件路径的时候，就不能将应用名存储到数据表中，而是存储文件其他部分的路径
然后再在页面加载的时候，根据发布应用的应用名拼接完整的路径，具体参考如下
页:
[1]