# Emop-component 文档 ## 问题 前端开发中使用UI组件库进行开发，但在开发过程中发现即便使用组件库但仍有大量样式重复且具有高复用性。因此该组件库旨在收集并统一解决项目中遇到的重复性问题，在统一前端规范目标上意义重大。 ## 解决方案 * 全局组件 > 基于angualr组件库ng-zorro的二次开发 或 公司内部使用的高度封装组件 * 全局样式 > 统一前端样式规范，为前端和UI搭建统一样式桥梁 * 全局指令或函数 > 解决前端常见且统一的需求或问题，包含但不仅限于时间格式转换、类型转换等多功能utils指令 ## 版本迭代 * 2022.08.26 * 更新emop-sidebar的header的css样式 * 修复emop-sidebar嵌入app时产生的样式问题 * 2022.08.25 * 重写原来公用组件里的关于页面并整合入该组件 * emop-sidebar的header增加图标显示 * 2022.08.24 * 增加global serice，内部可以直接创建message和notice两种消息提示 * 拖拽库可以设置“可触摸元素”和“实际移动元素” * 增加iconfont全局引入 * 增加emop-sidebar头部的左右插槽 * 表单组件问题修复 * 2022.08.19 * 新增emop-form-item组件。 * 在针对下拉框方面进行了专项优化，且解决了在多选类型下拉框控件的情况下后端传入属性为字符串造成组件报错的问题。 * emop-form-item增加disabled属性 ## 快速上手 **请确认项目使用angular框架且组件库为ng-zorro** > 该包已上传至npm进行管理，地址：https://www.npmjs.com/package/emop-components ### 1. 创建项目 ```js $ ng new 项目名 // 请在创建项目时选用scss样式 ``` ### 2. 安装ng-zorro ```js $ ng add ng-zorro-antd $ npm i // 安装时会需要配置，可以按照以下内容进行配置(版本不同可能配置项不同) ? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes ? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes ? Choose your locale code: zh_CN ? Choose template to create project: blank ``` ### 3.安装组件库 ```js $ npm i emop-components-angular@latest ``` ### 4.引入组件模块 > src/app/app.module.ts文件 ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NZ_I18N } from 'ng-zorro-antd/i18n'; import { zh_CN } from 'ng-zorro-antd/i18n'; import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { EmopModule } from "emop-components-angular"; // *引入emop-components-angular组件 registerLocaleData(zh); @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule, BrowserAnimationsModule, EmopModule // *加入引用 ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] }) export class AppModule { } ``` ### 5.引入其他资源 > 根目录/angular.json ```js "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/npm-test", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], "styles": [ "src/theme.less", "src/styles.scss", "./node_modules/emop-components-angular/src/app/styles/index.scss", // *引入全局样式库 "./node_modules/emop-components-angular/src/assets/iconfont/iconfont.css" // *引入iconfont ], "scripts": [ "./node_modules/emop-components-angular/src/assets/iconfont/iconfont.js" // *引入iconfont ] }, ``` > 根目录/tsconfig.app.json ```js /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts", "./node_modules/emop-components-angular/src/app/**/*.ts" // *引入全局服务 ] } ``` ### 引入拦截器 ```js import { EMOPHTTPInterceptor } from "emop-components-angular/src/app/interceptor/http.interceptor"; ``` ### 6. 组件测试 > （左侧菜单栏不会加载出数据是因为代理需要额外配置） ```html // app.component.html
测试
// app.component.ts import { Component } from '@angular/core'; import { EmopUtilsService } from 'emop-components-angular/src/app/services/emop-utils.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor( private emopUtilsService: EmopUtilsService ) { } test() { this.emopUtilsService.message('success', '组件启用成功'); } } ``` ### 7. 项目启动 > 根目录下执行以下代码 ```js $ npm start ``` ## 全局组件 > 请确保已经正确引入emop-components-angular组件库 ### emop-form * 组件描述 当表单内容为动态渲染时，常常需要在html文件中写大量ngIf来根据type属性进而解决表单控件的类型渲染。因此该组件旨在解决”动态表单“的渲染效率问题，统一对type属性进行动态渲染并统一解决该组件的部分问题。 * 组件属性 | 属性名 | 类型 | 默认值 | 说明 | | :---------: | :-----: | :----: | :----------------: | | formData | data[] | | 传入的表单数据 | | col | number | 1 | 表单的列数 | | hasFeedback | boolean | false | 是否有验证图标反馈 | - data对象 | 属性名 | 类型 | 默认值 | 说明 | | :---------: | :------------------------: | :------: | :-------------------------------------------------: | | type | string | "str" | 表单类型 | | alias | string | | 表单控件的显示标签 | | value | any | | 表单控件的值 可双向绑定 | | placeholder | string | | 表单控件的提示字符 | | options | {key: string, val: string} | | (表单类型：lov \| radio) 下拉选项对象或单选框的选项 | | tags | boolean | false | (表单类型：lov) 是否允许手动输入 | | multiple | boolean | false | (表单类型：lov) 是否允许多选 | | min | number | 0 | (表单类型：num) 最小值 | | max | number | Infinity | (表单类型：num) 最大值 | | step | number | 1 | (表单类型：num) 步进值 | | disabled | boolean | false | 表单控件的禁用 | | key | string | | 表单唯一键名 | | required | boolean | false | 是否必填 | | visible | boolean | true | 是否可见 | | enable | boolean | true | 是否启用 | * 组件方法 * validateItem(EmopFormData) > 对单一表单进行验证 * validate > 表单验证 * clear > 清除表单 * reset > 重置表单 * getData() > 获取表单的导出数据 * 附加说明 * 使用示例 ### emop-form-item ### emop-table ### emop-sidebar ## 前端规范 #### 变量命名 > 定义的变量应当尽可能得归类为一个对象 * 当变量以功能进行划分时，请使用对象将所有变量进行包裹 ```js 普通写法： let comfirmModalVisible:boolean = false; let comfirmModalSelected = 0; let comfirmModalState = 'sending'; 规范写法： // 确认弹出框变量 let comfirmModal: { visible: false, selected:0, state:'sending' } ``` #### 注释 > 针对函数的注释，使用 "/* */" 替代 "//" > > 前者在鼠标移入函数时能显示函数的功能及参数 > > 请针对所有函数进行注释 ```js 规范写法： /** * 获取详情信息 * @param a 描述.. * @param b 描述.. */ function getDetail(a:string, b:string) { } ``` #### emop设计系统2.0规范 https://www.figma.com/file/D5Y93Kdl9uYYIo4X8C12UZ/Emop-%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F2.0?node-id=1%3A1117