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

收藏

本帖最后由 Grayson.Shang 于 2024-4-23 11:35 编辑

相信菜单大家应该都不陌生吧，一个好看的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