emop-components v0.1.15

Emop-component 文档

问题

前端开发中使用UI组件库进行开发，但在开发过程中发现即便使用组件库但仍有大量样式重复且具有高复用性。因此该组件库旨在收集并统一解决项目中遇到的重复性问题，在统一前端规范目标上意义重大。

解决方案

• 全局组件

  基于angualr组件库ng-zorro的二次开发 或 公司内部使用的高度封装组件

• 全局样式

  统一前端样式规范，为前端和UI搭建统一样式桥梁

• 全局指令或函数

  解决前端常见且统一的需求或问题，包含但不仅限于时间格式转换、类型转换等多功能utils指令

版本迭代

• 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. 创建项目

$ ng new 项目名
// 请在创建项目时选用scss样式

2. 安装ng-zorro

$ 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.安装组件库

$ npm i emop-components@latest

4.引入组件模块

src/app/app.module.ts文件

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";  // *引入emop-components组件

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

"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/src/app/styles/index.scss",   // *引入全局样式库
              "./node_modules/emop-components/src/assets/iconfont/iconfont.css"   // *引入iconfont
            ],
            "scripts": [
              "./node_modules/emop-components/src/assets/iconfont/iconfont.js"  // *引入iconfont
            ]
          },

根目录/tsconfig.app.json

/* 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/src/app/services/*.service.ts"    // *引入全局服务
  ]
}

6. 组件测试

（左侧菜单栏不会加载出数据是因为代理需要额外配置）

// app.component.html
<emop-sidebar>
  <div (click)="test()">
    <i class="iconfont icon-chanpinfuwu"></i>
    测试
  </div>
</emop-sidebar>


// app.component.ts
import { Component } from '@angular/core';
import { GlobalService } from 'emop-components/src/app/services/global.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private globalService: GlobalService
  ) {

  }
  test() {
    this.globalService.message('success', '组件启用成功');
  }
}

7. 项目启动

根目录下执行以下代码

$ npm start

全局组件

请确保已经正确引入emop-components组件库

emop-form

• 组件描述

  当表单内容为动态渲染时，常常需要在html文件中写大量ngIf来根据type属性进而解决表单控件的类型渲染。因此该组件旨在解决”动态表单“的渲染效率问题，统一对type属性进行动态渲染并统一解决该组件的部分问题。

• 组件属性

  属性名	类型	默认值	说明
  formData	EmopFormData[]		传入的表单数据
  col	number	1	表单的列数
  hasFeedback	boolean	false	是否有验证图标反馈

  • EmopFormData对象

  属性名	类型	默认值	说明
  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	是否可见

• 组件方法

  • validateItem(EmopFormData) : boolean

    对单一表单进行验证

  • validate : boolean

    表单验证

  • clear

    清除表单

  • reset

    重置表单

  • getData()

    获取表单的导出数据

• 附加说明

• 使用示例

​

前端规范

变量命名

定义的变量应当尽可能得归类为一个对象

• 当变量以功能进行划分时，请使用对象将所有变量进行包裹

  普通写法：
  let comfirmModalVisible:boolean = false;
  let comfirmModalSelected = 0;
  let comfirmModalState = 'sending';
  
  规范写法：
  // 确认弹出框变量
  let comfirmModal: {
    visible: false,
    selected:0,
    state:'sending'
  }

注释

针对函数的注释，使用 "/* */" 替代 "//"

前者在鼠标移入函数时能显示函数的功能及参数

请针对所有函数进行注释

规范写法：
/**
* 获取详情信息
* @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