vue element-ui GitHub release > ## loit-web-component-gx前端组件库

## 介绍 [loit-web-component-gx]是一个前端组件库，默认蓝色主题风格。 [中文文档](https://mgbq.github.io/nx-admin-site/zh/) **网址** [Github 仓库](https://github.com/mgbq/loit-web-component-gx) | [预览地址] [应用地址]http://bba.loiot.com:8303/api-portal/cas/login **本项目不支持低版本浏览器(如 ie)** **注意：该项目使用 element-ui@2.15.13+ 版本，所以最低兼容 vue@2.7.14+** ## 修订记录 2024.12.23 V0.5.23 -- ###1.调整编辑页面各个控件的placeholder去掉冒号 2024.12.23 V0.5.22 -- ###1.调整表单样式级联结构，修正cssStyle样式在某些条件下不起效的问题 2024.12.23 V0.5.21 -- ###1.调整EXTable表格问题 2024.12.23 V0.5.20 -- ###1.修改表格组件错位问题 2024.12.23 V0.5.19 -- ###1.修改编辑页面图片显示出现闪一下的问题 2024.12.23 V0.5.18 -- ###1.修改详情页面图片显示出现闪一下的问题 2024.12.23 V0.5.17 -- ###1.编辑页面下拉框控件el-select增加is-select-success 状态样式 ###2.修改详情页面样式 2024.12.23 V0.5.16 -- ###1.去掉编辑页面下拉框控件el-select增加is-select-success 状态样式 2024.12.23 V0.5.15 -- ###1.编辑页面下拉框控件el-select增加is-select-success 状态样式 2024.12.23 V0.5.14 -- ###1.调整日期控件的字体大小 2024.12.23 V0.5.13 -- ###1.调整表头列表样式 2024.12.23 V0.5.12 -- ###1.调整更新问题 2024.12.23 V0.5.11 -- ###1.调整附件上传提示位置及详情页面附件回显不显示时间 2024.12.23 V0.5.10 -- ###1.调整森防样式效果 2024.11.26 V0.5.8 -- ###1.修复附件管理接口，兼容不同环境下的附件管理接口 2024.11.26 V0.5.7 -- ###1.调试查看附件不显示问题 2024.11.26 V0.5.6 -- ###1.调试附件不显示问题 2024.11.26 V0.5.5 -- ###1.附件管理接口改成在env.js中配置attachmentUrl，不再默认使用门户的附件管理接口 2024.08.52 V0.5.4 -- ###不做功能修改，仅测试发布流程 2024.08.52 V0.5.3 -- ###1.表单EXForm，增加默认的多选样式checkbox，提供赋值勾选和配置隐藏选项hideOptions、显示选项showOptions的功能 2024.07.17 V0.5.0 -- ###1.表单EXForm，文本输入框添加参数rows配置高度 2023.11.23 V0.4.2 -- ###1.去掉组件内的大部分字号设置，在ex.scss设置统一字号 ###2.完善搜索栏行间距 ###3.完善表单不同尺寸的样式 2023.11.2 V0.3.36 -- ###1.树EXTree，修改树根节点代码用root表示 2023.10.27 V0.3.35 -- ###1.表单EXForm，增加size参数设置尺寸大小 ###2.表单EXForm，表单行间距根据size自适应 2023.10.19 V0.3.30 -- ###1.优化表单样式，使得行内占比默认100% 2023.10.11 V0.3.24 -- ###1.树EXTree：增加属性treeData直接赋值 ###2.树EXTree：defaultProps增加useKey属性，用于配置点击节点时需要获取数据对象的字段名字符串数组集合 2023.09.28 V0.3.15 -- ###1.地图EXGis：修改jquery声明 2023.09.18 V0.3.6 -- ###1.搜索栏EXSearchHead：筛选功能默认收起，示例页面的导出按钮从筛选栏挪到表格操作行 ###2.树EXTree：可自定义修改叶子节点的图标 2023.09.15 V0.3.5 -- ###1.人员选择组件EXChoosePerson：添加(personOrgCode|personId|personName)参数来实现初始化已选人员，兼容自定义查询人员的方法和默认自动查询系统用户两种 2023.09.12 V0.3.3 -- ###1.表单组件EXForm：封装底部多个操作按钮bottomBtnProps(width|align|operationHandle)，可设置行宽度、对齐方式、按钮属性和事件 2023.09.08 V0.3.2 -- ###1.表单组件EXForm、下拉框组件EXSelect：添加远程搜索 2023.09.07 V0.3.1 -- ###1.选择人员组件EXChoosePerson：添加clickUnit事件传参，兼容自定义响应部门点击事件，从而自定义查询人员列表 2023.09.04 V0.2.31 -- ###1.搜索栏EXSearchHead：增加单选框类型 2023.09.01 V0.2.30 -- ###1.搜索栏EXSearchHead：元素增加show(*true|false)参数配置是否隐藏，默认是显示 2023.08.30 V0.2.26 -- ###1.表单EXForm：下拉框的选项可添加自定义的按钮和事件，添加示例到编辑页面的字典下拉框 2023.08.28 V0.2.23 -- ###1.表格EXTable：添加iconSlotName配置自定义图标 2023.08.22 V0.2.10 -- ###1.添加EXCheckButton 多选框独立组件 2023.08.18 V0.2.9 -- ###1.优化流转信息EXProcess：更新样式、添加自定义操作按钮数组、添加自定义文字行 ###2.添加EXAttachDialog附件列表弹窗组件 ###3.EXDetailContent详情：添加labelWidth传参自定义标签宽度 2023.08.17 V0.2.7 -- ###1.完善EXChooseDepartment/EXChoosePerson： 参数兼容：1.orgCode传递父部门编码，组件内自己查询构造树；2.treeData传递树，组件内直接赋值，解决渲染速度慢的问题 2023.08.15 V0.2.2 -- ###1.完善EXChooseAddress地图选择：修复返回地址时对于直辖市重复拼接的问题 2023.08.09 V0.2.0 -- ###1.新增EXStageBox 进度状态组件 ###2.完善EXProcess 添加阶段名称和操作类型的显示、样式调整 2023.08.01 V0.1.34 -- ###1.EXForm/EXSearchHead：响应日期事件由focus改成change 2023.07.26 V0.1.30~33 -- ###1.EXDetailContent详情：添加对非附件的图片的显示 ###2.EXStatDateSearch：添加统计周期组件，提供常用统计周期(本日、本周、本月、本季度、本年)的勾选和选择时间控件的初始化，支持自定义展示 ###3.EXSearchHead搜索栏：新增类型checkstatdate显示EXStatDateSearch组件 ###4.EXSearchHead/EXForm/EXSelect：添加showOptions/hideOptions(Array)参数配置显示/隐藏指定选项数组 2023.07.20 V0.1.27~28 -- ###1.EXTable：添加hasTotalRow和totalRowText属性实现带有序号的表格的合计行的序号列的文字显示为“合计”，可修改文字内容 tableHeadConfig添加show属性切换表头列的显示/隐藏 2023.07.19 V0.1.25~26 -- ###1.添加EXMultiTable组件和示例页面“多个表格”：适应一个页面多个分页表格组件的场景 2023.07.18 V0.1.24 -- ###1.EXSearchHead：添加hasSearchResetBtn(*true|false)属性控制重置按钮的显示；调整关键字输入框的位置样式，根据右侧是否显示收起筛选、重置而变化 ###2.EXDetailContent：修复添加了支持对象关联多级属性方法后，覆盖业务默认值的问题 2023.07.11 V0.1.19 -- ###1.EXDetailContent：支持对象关联多级属性 2023.07.10 V0.1.16~18 -- ###1.EXSearchHead组件：添加resetEXSTree重置和修改树选项的方法；添加openSearchForm(*true|false)默认展开操作栏；调整查询按钮占位宽度 ###2.EXTableTopBtnDesc组件：添加slotName(String)设置文字描述行使用slot方式时的slot名称，与业务页面的slot模板名称一致 ###3.EXForm组件：添加resetEXSTree重置树选项的方法 2023.07.05 V0.1.15 -- ###1.EXForm组件：下拉框选择回调函数的第二个参数返回选中的文本内容 2023.06.30 V0.1.9 -- ###1.添加EXImportDialog组件：封装文件导入的弹窗和上传到后端功能 2023.06.28 V0.1.7-15 -- ###1.树形下拉框EXSelectTree：限制最大高度、添加滚动条；回调函数回传值对象 2023.06.21 V0.1.7-7~12 -- ###1.表格EXTable：添加嵌套表头功能 ###2.树EXTree： 1）点击树节点回传当前点击的值对象fetchTableData(codeStr,item,containsNull) 2）添加ref值exTree，方便使用原生方法 3）添加多选树节点的回传函数checkTreeData(item) 2023.06.20 V0.1.7-4~6 -- ###1.搜索栏EXSearchHeand： 1）添加参数hasHeadTop(*true|false)配置是否显示顶部标题栏 2）添加参数hasCloseSearch(*true|false) 是否显示展开收起操作栏 3）添加参数showDivider(*true|false)是否显示顶部下划线样式 4）操作按钮operationHandleBtn添加event属性自定义响应函数名 2023.06.15 V0.1.7-3 -- ###1.添加“选项卡表格-下”页面规范 ###2.搜索栏EXSearchHeand：未配置参数title时不显示左侧图标；添加参数hasSearchWords(*true|false)配置是否显示模糊查询输入框 ###3.选项卡EXTabs：添加参数align(*left|right )配置对齐方式 2023.06.14 V0.1.7-1~0.1.7-2 -- ###1.搜索栏EXSearchHeand样式调整 2023.06.14 V0.1.7 -- ###1.添加“选项卡表格-上”页面规范；折叠菜单颜色调整；恢复一级导航栏 ###2.搜索栏EXSearchHeand添加插槽slot；选项卡EXTabs添加cssStyle配置自定义样式 ###3.搜索栏EXSearchHeand、表单EXForm添加默认placeholder 2023.06.09 V0.1.6 -- ###1.添加EXArticle、EXManTitle组件 ###2.系统瘦身 2023.06.08 V0.1.1~0.1.5 -- ###1.外部系统可覆盖修改组件库的访问网址 ###2.外部系统可切换自身及组件库的主题颜色 2023.06.02 V0.1.0 -- ###1.添加地图选择组件默认中心位置的开放参数 ###2.添加公共函数EXMixin、EXList ###3.修改打包配置 2023.05.29 V0.0.2~0.0.18 -- ###1.添加首页说明 ###2.添加附件文字配置的开放参数 2023.05.29 V0.0.1 -- ###1.发布 ## 下载 git：`git clone https://github.com/mgbq/nx-admin.git` npm：`npm install` ## 功能 ``` - 表格示例 - 普通表格 - 查询表格 - 树形表格 - 多个表格 - 选项卡表格-上 - 选项卡表格-下 - 表单示例 - 编辑 - 详情 - 导航详情 - 选项卡详情 ``` ## 组件清单 ``` - EXArticle 文章内容 - EXMainTitle 文章标题 - EXProcess 流转信息 - EXCharts 图表 - EXDetailContent 表单详情 - EXHeader 编辑/详情头部 - EXNavList 导航条 - EXDialog 弹窗 - EXChooseAddress 地图地址选择 - EXChooseDepartment 部门选择 - EXChoosePerson 人员选择 - EXConfirmDialog 确认框 - EXImportDialog 文件导入弹窗 - EXAttachDialog 附件弹窗 - EXForm 表单编辑 - EXSelect 普通下拉框 - EXSelectTree 树形下拉框 - EXGis 地图 - EXHoverTitle 标题 - EXNodata 无数据提示 - EXPagination 分页 - EXPreview 图片/视频预览 - EXSearchHead 搜索栏 - EXStatDateSearch 统计周期 - EXTable 表格 - EXMultiTable 表格 - EXTableColumn 嵌套表头 - EXTableTopBtnDesc 表格头部 - EXTabs 选项卡 - ETree 简单树 - EXTree 二次封装树 - EXUploadImg 图片/视频上传 - EXUploadFile 文件上传 - EXStageBox 进度状态 ``` ## 开发 ```bash # 克隆项目 git clone https://github.com/mgbq/loit-web-component-gx.git # 安装依赖 npm install     # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev ``` 浏览器访问 http://localhost:9526 ## 调用 ```bash # 查询当前的镜像网址 npm get registry # 使用官方源 npm config set registry https://registry.npmjs.org/ # 卸载依赖（可选） npm uninstall loit-web-component-gx # 安装最新版本的依赖 npm install loit-web-component-gx@latest #main.js导入组件库 import exui from 'loit-web-component-gx' Vue.use(exui) #main.js注册组件访问网址 import * as exConfig from 'loit-web-component-gx/dist/config/env' #exConfig是组件库的访问网址配置文件 import * as myConfig from '@/config/env' #myConfig是外部系统的访问网址配置文件 const urlAttr = Reflect.ownKeys(exConfig) urlAttr.forEach(key => { if(Reflect.has(myConfig, key) && typeof myConfig[key] === "string"){ var funcName = 'set' + key.replace(key[0],key[0].toUpperCase()); if(typeof exConfig[funcName] === "function"){ Reflect.apply(exConfig[funcName], exConfig, [myConfig[key]]) } } }) #设置主题颜色 $config.themeColor = 'Red' #重新绑定配置$config bindToGlobal(exConfig, '$config') #main.js导入富文本 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import QuillEditor from 'vue-quill-editor' Vue.use(QuillEditor) #main.js导入地图样式 import 'maptalks/dist/maptalks.css' #permission.js修改 global.changeTheme($config.themeColor) ```