[TOC]

Fantasy-Ngzorro

更新记录

| 更新人 | 更新时间 | 更新内容 | | ------ | --------- | ------------------------------------------------------------ | | MC | 2023-2-10 | 1、Readme文件目录结构创建 2、新增按钮、按钮组、通用表格、筛选器、状态、详情头、详情单头、详情明细相关文档。 | | MC | 2023-2-13 | 1、新增表单、明细表单、间隔、小标题相关文档2、所有组件字段增加必填选项。 | | | | |

前言

1、文档中的插槽概念借用vue中的插槽，在angular里面体现出来就是模板 #template。

2、事件传递建议使用bind(this)绑定自定义的函数去实现方法, 而不是箭头函数。示例：onChangeEvent: this.formInputChange.bind(this)

3、运行本地服务之后，访问demo路由即可查看具体交互

1、按钮(hd-button)

效果图

示例

<hd-button type="primary">查询</hd-button>

说明

| 参数 | 类型 | 默认值 | 说明 | | -------- | ------ | ------- | ------------------------------------------------------------ | | loading | boolen | false | 加载中 | | type | string | default | primary | dashed | danger | default | link | submit | reset | add (其中add类型会默认增加加号) | | disabled | boolen | False | 按钮是否禁用 |

注意点

• 为防止回车触发表单提交事件，禁止使用submit类型的按钮，请使用普通按钮+click事件触发表单提交!

2、按钮组(hd-button-group)

效果图

示例

<hd-button-group>
  <ng-template #buttonGroupLeft>
    <hd-button type="add">add</hd-button>
    <hd-button type="default">default</hd-button>
    <hd-button type="default">default</hd-button>
    <hd-button type="default">default</hd-button>
  </ng-template>
  <ng-template #buttonGroupRight>
    <hd-button type="default">default</hd-button>
  </ng-template>
</hd-button-group>

说明

| 参数 | 类型 | 说明 | | ---------------- | ------------------------------- | -------------- | | buttonGroupLeft | @ContentChild TemplateRef | 按钮组左侧插槽 | | buttonGroupRight | @ContentChild TemplateRef | 按钮组右侧插槽 |

注意点

• hd-button-group中的按钮会自动增加间距12px

3、通用表格(hd-current-table)

效果图

示例

<hd-current-table #hdCurrentTable [(tablePageIndex)]="pageIndex" [(tablePageSize)]="pageSize" [scroll]="{x: '600px'}" [tableData]="page" (tableSearchEvent)="search($event)" showSelected selectField="billNumber" (selectEvent)="selectResult($event)">
  <ng-template #tableTotal>
    <nz-alert nzType="info" [nzMessage]="nzAlertTotal" nzShowIcon></nz-alert>
    <ng-template #nzAlertTotal>
      <span>已选择{{ tableSelectList.length }}项服务</span>&nbsp;&nbsp;
      <span>调用总计：36.4万</span>&nbsp;&nbsp;
      <span class="common-btn-group">
        <a (click)="hdCurrentTable.resetStatus()">清空</a>
      </span>
    </ng-template>
  </ng-template>
  <ng-template #tableHead>
    <th nzLeft="40px" style="width: 100px">配送单号</th>
    <th>收货日期</th>
    <th>状态</th>
    <th nzRight="0px">操作</th>
  </ng-template>
  <ng-template #tableBody let-data>
    <!-- 父页面自己的样式，不允许用行内样式，全都定义class写到css文件中，颜色、字号等属性用通用文件中的变量，不允许直接写颜色值 -->
    <td nzLeft="40px" style="width: 100px" class="common-billNumber"><a>{{ data.billNumber || '&lt;空&gt;' }}</a></td>
    <td>{{ data.distDate || '&lt;空&gt;' }}</td>
    <td>
      <hd-status [status]="'initial'">未审核</hd-status>
    </td>
    <td nzRight="0px" style="width: 200px">
      <span class="common-btn-group">
        <a>复制</a>
        <a>修改详情</a>
        <a>修改日期</a>
        <a class="common-danger-btn">删除</a>
      </span>
    </td>
  </ng-template>
</hd-current-table>

// 通用表格的相关变量
page: Page<any> = new Page<any>();
pageIndex = 1;
pageSize = 10;
loading: boolean = false;
tableSelectList: Array<any> = [];

// 表格的查询事件
search(reset: boolean = false): void {
  if (reset) {
    this.pageIndex = 1;
  }

  this.queryFilter.pageNumber = this.pageIndex - 1;
  this.queryFilter.pageSize = this.pageSize;

  this.loading = true;
  this.hdDemoService.queryDemo(this.queryFilter).subscribe(
    result => {
      this.loading = false;
      this.page = result;
    }, error => {
      this.loading = false;
    }
  );
}

/**
  * 表格的选择事件
  * @param selectList 勾选的所有的数据集合
  */
selectResult(selectList?: any) {
  // 拿到勾选的所有的数据
  // console.log('selectList', selectList);
  this.tableSelectList = selectList;
}

说明

| 参数 | 类型 | 默认值 | 说明 | | ------------------------ | ------------------------------ | --------------- | ------------------------------------------------------------ | | *tableData | Page | | 表格源数据 | | scroll | { [key: string]: string } | { x: '1150px' } | 滚动参数 | | *tablePageIndex | number | | 当前页码（双向绑定） | | *tablePageSize | number | | 每页展示的数据量（双向绑定） | | *tableSearchEvent | EventEmitter<reset: boolen> | | 表格更换tablePageIndex、tablePageSize触发函数，emit重置标识 | | showSelected | boolean | false | 是否开启勾选功能 | | selectEvent | EventEmitter | | 勾选状态改变触发函数，emit已勾选数组 | | selectField | string | billNumber | 与showSelected配合使用，勾选判断逻辑的关键词（传入源数据中的主键字段） | | tableHead | @ContentChild TemplateRef | | 表格头插槽 | | tableBody | @ContentChild TemplateRef | | 表格数据主体插槽 | | tableTotal | @ContentChild TemplateRef | | 表格顶部合计插槽 | | showTableTotal（弃用） | boolean | False | 是否显示底部合计区域 | | tableTotalOption（弃用） | Array | | 底部合计区域的合计字段选项集合 |

注意点

• 如果发现tableSearchEvent绑定的函数当tablePageSize改变时会触发两次，请不要惊慌，这是ngzorro8.5.x版本的bug，不会影响使用体验，只会额外调用一次接口，浪费些性能。

4、筛选器(hd-filter)

效果图

示例

<hd-filter [filterList]="filterList" (searchEvent)="search(true, $event)"></hd-filter>

filterList: Array<Filter> = [];
filterListTemplate: Array<Filter> = [{
  type: FilterListType.Input,
  label: '配送单号',
  name: 'billNumberEq',
  value: '',
  onChangeEvent: (item) => {
    console.log('item', item);
  }
}, {
  type: FilterListType.Select,
  label: '单项选择器测试测',
  name: 'selectValue',
  value: true,
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: true,
      label: '是是是是是是是是是是是是是是是是是是是是是是'
    }, {
      value: false,
      label: '否'
    }]
  },
  onChangeEvent: (item) => {
    console.log('item', item);
  }
}, {
  type: FilterListType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  value: null,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: '01',
      label: '第一个第一个第一个第一个第一个'
    }, {
      value: '02',
      label: '第二个'
    }, {
      value: '03',
      label: '第三个'
    }, {
      value: '04',
      label: '第四个'
    }]
  }
}, {
  type: FilterListType.Select,
  label: '测试label',
  name: 'selectValue1',
  value: null,
  selectOption: {
    value: 'productCode',
    label: 'productName',
    showLabelAndValue: true,
    selectList: []
  },
  onSearchEvent: (item, selectOption) => {
    console.log('onSearchEvent', item);
    console.log('selectOption', selectOption);
    // 在这里去调接口查数据 定时器模拟调接口
    setTimeout(() => {
      selectOption.selectList = [{
        productCode: '123213213',
        productName: '测试商品1'
      }, {
        productCode: 'qwertyuiop',
        productName: '测试商品2'
      }]
    }, 1000);
  }
}, {
  type: FilterListType.Date,
  label: '单个日期选择',
  name: 'dateValue',
  value: '2020-1-2'
}, {
  type: FilterListType.DateRange,
  label: '日期范围选择',
  name: 'dateRangeValue',
  value: ['2020-1-2', '2020-1-2']
}];

// 查询、重置按钮触发函数
filterChange(filter?: any) {
  console.log('filter',filter);
  if (filter) {
    this.queryFilter = filter;
    // 因为更改了filter 需要清空所有的勾选 触发组件的重置事件
    this.hdCurrentTable.resetStatus();
    this.search(true);
  }
}

说明

| 参数 | 类型 | 默认值 | 说明 | | ----------- | -------------- | ------ | -------------------------------------- | | filterList | Array | | 所有的筛选器空间数据 | | searchEvent | EventEmitter<> | | 查询、重置按钮触发函数，带回筛选器数据 |

Filter

| 参数 | 类型 | 默认值 | 说明 | | ------------- | ----------------------------------------------------------- | ------ | ------------------------------------------------------------ | | *type | FilterListType | | 控件类型 Input | Select | Date | DateRange | MultipleSelect | | *label | string | | 控件前文案 | | *name | string | | 字段名称 | | placeholder | string | | 输入框提示文案 | | value | string | boolen | number | Array<string | Date> | null | null | 初始值 | | selectOption | SelectOption | | select选择器选项配置 | | onSearchEvent | EventEmitter<> | | select选择器搜索事件 可用于更新备选集合 | | onChangeEvent | EventEmitter<> | | 控件的值改变事件 可用于控件间联动 |

SelectOption

| 参数 | 类型 | 默认值 | 说明 | | -------------------------- | ---------- | ------ | ------------------------------------------------------ | | *label | string | | label字段，取selectList数组中的某个字段作为选择器label | | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value | | *selectList | Array | | 选项列表 | | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label | | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |

注意点

• 事件函数如果内部语句过多，请使用bind（this）方法，示例：onChangeEvent: this.formInputChange.bind(this)

5、状态(hd-status)

效果图

示例

<hd-status status="initial">未审核</hd-status>
<hd-status status="audited">已审核</hd-status>
<hd-status status="picking">拣货中</hd-status>
<hd-status status="partshipped">部分收货</hd-status>
<hd-status status="received">已收货</hd-status>
<hd-status status="deleted">已删除</hd-status>
<hd-status status="shipped">已配送</hd-status>

说明

| 参数 | 类型 | 说明 | | ------ | ------ | ------ | | status | string | 状态值 |

注意点

• state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色

6、详情头(hd-detail-tip)

效果图

示例

<hd-detail-tip state="shipped" stateText="配送中" billNumber="202111030001"></hd-detail-tip>

说明

| 参数 | 类型 | 说明 | | ---------- | ------ | -------- | | state | string | 状态值 | | stateText | string | 状态文案 | | billNumber | string | 单号 |

注意点

• state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色

7、详情单头(hd-detail-form)

效果图

示例

<hd-detail-form [formCols]="formCols"></hd-detail-form>

// 详情页面单头组件数据
formCols: Array<HdOption> = [
  {
    label: '收货单号收货单号收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: ''
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '备注',
    value: '字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001'
  },
];

说明

| 参数 | 类型 | 说明 | | -------- | -------------------- | ------------ | | formCols | Array<{label,value}> | 展示的列数组 |

8、详情明细(hd-detail-lines)

效果图

示例

<hd-detail-lines [scroll]="{x: '1150px'}" selectField="uuid" (selectEvent)="selectResultLines($event)"
  [lines]="lines" showSelected columnsNumber="4" showTotal [totalOption]="detailLinesTotalOption">
  <ng-template #detailLineHead>
    <th style="width: 40px">序号</th>
    <th style="width: 150px">商品编码</th>
    <th>商品名称</th>
    <th style="width: 80px" nzRight="0">操作</th>
  </ng-template>
  <ng-template #detailLineBody let-data>
    <td style="width: 40px">{{ data.lineNumber || '&lt;空&gt;' }}</td>
    <td style="width: 150px">
      <span *ngIf="!modifyFlag;else modifyTmp">{{ data.productCode || '&lt;空&gt;'  }}</span>
      <ng-template #modifyTmp>
        <input nz-input placeholder="请输入商品编码" [(ngModel)]="data.productCode" />
      </ng-template>
    </td>
    <td>{{ data.productName || '&lt;空&gt;'  }}</td>
    <td style="width: 80px" nzRight="0">
      <span class="common-btn-group">
        <a>详情</a>
        <a class="common-danger-btn">删除</a>
      </span>
    </td>
  </ng-template>
</hd-detail-lines>

detailLinesTotalOption = [{
  insertIndex: 1,
  insertValue: 100
},{
  insertIndex: 2,
  insertValue: 200,
  align: 'right'
}]

/**
  * 明细的选择事件
  * @param selectList 勾选的所有的数据集合
  */
selectResultLines(selectList?: any) {
   // 拿到勾选的所有的数据
   // console.log('selectResultLines', selectList);
}

说明

| 参数 | 类型 | 默认值 | 说明 | | -------------- | ------------------------------ | ---------- | ------------------------------------------------------------ | | *lines | Array | | 接口返回的源数据 | | showTotal | boolean | false | 是否显示合计 | | columnsNumber | number | string | | 列数（detailLineHead中所有的列数） | | totalOption | Array | | 合计列选项 | | showSelected | boolean | false | 是否开启勾选功能 | | selectEvent | EventEmitter | | 勾选状态改变触发函数，emit已勾选数组 | | selectField | string | billNumber | 与showSelected配合使用，勾选判断逻辑的关键词（传入源数据中的主键字段） | | detailLineHead | @ContentChild TemplateRef | | 表格头插槽 | | detailLineBody | @ContentChild TemplateRef | | 表格数据主体插槽 |

TotalOption

| 参数 | 类型 | 说明 | | ----------- | ------ | ----------------------------------- | | insertIndex | number | 插入下标 | | insertValue | any | 插入值 | | align | string | 列对齐方式 left | right | center |

9、表单(hd-form)

效果图

示例

<hd-form [formList]="formInput" (changeEvent)="formChangeEvent($event)"></hd-form>

validateHdForm: FormGroup;
formInput: Array<FormItem> = [{
  type: FormListType.Input,
  label: '配送单号',
  name: 'billNumberEq',
  require: true,
  width: 2,
  value: '',
  maxLength: 10,
  color: 'blue',
  // 事件传递的建议写法, 建议使用bind(this), 而不是箭头函数
  onChangeEvent: this.formInputChange.bind(this)
}, {
  type: FormListType.ViewDom,
  label: '学校',
  name: 'school',
  width: 2,
  value: '[T8888]测试用中学'
}, {
  type: FormListType.Select,
  label: '单项选择器选择',
  name: 'selectValue',
  value: 'qwer',
  require: true,
  defaultLabel: '组件外默认的选项',
  width: 2,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
    console.log('测试this', this);
    this.validateHdForm.get('qwer').setValue(true);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    showLabelAndValue: true, // 使用此配置，最后展示为[value]label
    selectList: [{
      value: true,
      label: '是'
    }, {
      value: false,
      label: '否'
    }]
  }
}, {
  type: FormListType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  value: ['05', '06'],
  require: true,
  defaultLabel: ['第五个', '第六个'],
  width: 2,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: '01',
      label: '第一个'
    }, {
      value: '02',
      label: '第二个'
    }, {
      value: '03',
      label: '第三个'
    }, {
      value: '04',
      label: '第四个'
    }]
  }
}, {
  type: FormListType.Date,
  label: '单个日期选择选择',
  name: 'dateValue',
  width: 1,
  value: '2020-1-2'
}, {
  type: FormListType.DateRange,
  label: '日期范围选择',
  require: true,
  width: 1,
  name: 'dateRangeValue',
  value: ['2020-1-2', '2020-1-2']
}, {
  type: FormListType.InputNumber,
  label: '数字输入',
  require: true,
  width: 1,
  name: 'inputNumberValue',
  value: null,
  disabled: false,
  color: 'red'
}, {
  type: FormListType.TextArea,
  label: '备注',
  require: true,
  name: 'remark',
  width: 4,
  value: '这是个备注'
}];


/**
  * form组件值改变函数
  * @param validateForm form组件返回的表单对象
  */
formChangeEvent(validateForm: any) {
  this.validateHdForm = validateForm;
  // console.log('form组件返回',this.validateHdForm.getRawValue());
}

说明

| 参数 | 类型 | 默认值 | 说明 | | --------------- | --------------- | ------ | -------------------------------- | | formInput | Array | | 表单控件数组 | | formChangeEvent | EventEmitter<> | | 表单值改变事件，返回当前表单内容 |

TotalOption

| 参数 | 类型 | 说明 | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | *type | FormListType | 控件类型 Input | Select | Date | DateRange | MultipleSelect | TextArea | InputNumber | ViewDom（单纯的显示控件） | | *label | string | 文本 | | *name | string | 字段名 | | require | boolen | 是否必填 | | placeholder | string | 输入框提示文案 | | width | number | 占据的列数。默认1 | | value | string | boolen | number | Array | Array | null | 值 | | disabled | boolen | 是否禁用 | | color | string | 控件文本颜色 | | hide | boolean | 是否为隐藏字段，仅用于填充表单的字段，不显示在页面上 | | maxLength | number | input控件的输入长度 | | selectOption | SelectOption | 控件为Select时，选项列表 | | inputNumber | InputNumber | number组件的选项，min、max、step | | onChangeEvent | Function | 控件的值改变事件 可用于控件间联动 | | onSearchEvent | Function | select选择器搜索事件 可用于更新备选集合 | | defaultLabel | string | Array | select选择器不初始化的时候可以使用defaultLabel搭配value，设置默认值 |

InputNumber

| 参数 | 类型 | 默认值 | 说明 | | ---- | ------ | -------- | ------ | | min | number | 0 | 最小值 | | max | number | 99999999 | 最大值 | | step | number | 1 | 步阶 |

SelectOption

| 参数 | 类型 | 默认值 | 说明 | | -------------------------- | ---------- | ------ | ------------------------------------------------------ | | *label | string | | label字段，取selectList数组中的某个字段作为选择器label | | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value | | *selectList | Array | | 选项列表 | | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label | | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |

10、明细表单(hd-form-lines)

效果图

示例

<hd-form-lines [formLines]="formLines" [operateButtons]="['delete']" showDeleteConfirm     			[formLinesData]="formLinesData" (changeEvent)="formLinesChangeEvent($event)"></hd-form-lines>

validateHdFormLines: FormGroup;
formLines: Array<FormLine> = [{
  type: FormLineType.Select,
  label: '商品',
  name: 'productCode',
  require: true,
  onChangeEvent: (item, line: FormGroup) => {
    // 列之间的交互赋值等等
    console.log('item', item);
    console.log('测试this', line);
    if (item) {
      line.get('productSpec').setValue(12);
      line.get('money').setValue(22);
    }
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
    // 在这里去调接口查数据
    this.formLines[0].selectOption.selectList = [{
      productCode: '03',
      productName: '第三个'
    }, {
      productCode: '04',
      productName: '第四个'
    }]
    console.log('formLines', this.formLines);
  },
  selectOption: {
    value: 'productCode',
    label: 'productName',
    showLabelAndValue: true,
    selectList: [{
      productCode: '01',
      productName: '第一个'
    }, {
      productCode: '02',
      productName: '第二个'
    }]
  }
},{
  type: FormLineType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  require: true,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'multipleSelectValue',
    label: 'multipleSelectValueLabel',
    selectList: [{
      multipleSelectValue: '01',
      multipleSelectValueLabel: '第一个'
    }, {
      multipleSelectValue: '02',
      multipleSelectValueLabel: '第二个'
    }, {
      multipleSelectValue: '03',
      multipleSelectValueLabel: '第三个'
    }, {
      multipleSelectValue: '04',
      multipleSelectValueLabel: '第四个'
    }]
  }
}, {
  type: FormLineType.Input,
  label: '测试输入框',
  name: 'testInput',
  maxLength: 10,
  explainOption: {
    show: true,
    name: 'explain',
    color: 'red'
  },
  onChangeEvent: (item, line: FormGroup) => {
    // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
    if(line.get('hideQuantity').value === 100 && item){
      line.get('explain').setValue('这是一个测试文案qaq');
    }else{
      line.get('explain').setValue('');
    }
  },
}, {
  type: FormLineType.InputNumber,
  label: '测试输入框1',
  name: 'testInput1',
  maxLength: 10,
  colorOption: {
    name: 'inputColor',
    color: 'red'
  },
  onChangeEvent: (item, line: FormGroup) => {
    // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
    if(line.get('testInput1').value >= 50 && item){
      line.get('inputColor').setValue('red');
    }else{
      line.get('inputColor').setValue(null);
    }
  },
}, {
  type: FormLineType.ViewDom,
  label: '规格',
  name: 'productSpec'
}, {
  type: FormLineType.ViewDom,
  label: '金额',
  name: 'money',
  preserveNumber: 1
}, {
  type: FormLineType.ViewDom,
  label: '价格',
  align: 'right',
  name: 'price',
  preserveNumber: 2
}, {
  type: FormLineType.ViewDom,
  label: '数量',
  name: 'quantity'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏数量',
  hide: true,
  name: 'hideQuantity'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏的说明',
  hide: true,
  name: 'explain'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏的颜色，用于表示',
  hide: true,
  name: 'inputColor'
}];

说明

| 参数 | 类型 | 默认值 | 说明 | | ----------------- | --------------- | ---------------- | ------------------------------------------------------------ | | formInput | Array | | 表单控件数组 | | operateButtons | Array | ['add','delete'] | 操作按钮组，默认有添加和删除，如传入['delete']则不显示新增按钮 | | showDeleteConfirm | boolen | false | 删除按钮是否显示确认提示框 | | formChangeEvent | EventEmitter<> | | 表单值改变事件，返回当前表单内容 |

TotalOption

| 参数 | 类型 | 说明 | | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | *type | FormListType | 控件类型 Input | Select | Date | DateRange | MultipleSelect | TextArea | InputNumber | ViewDom（单纯的显示控件） | | *label | string | 文本 | | *name | string | 字段名 | | placeholder | string | 输入框提示文案 | | require | boolen | 是否必填 | | width | number | 占据的列数。默认1 | | value | string | boolen | number | Array | Array | null | 值 | | align | string | 列对齐方式，'left' | 'right' | 'center' | | isSelect | boolean | 输入框等是否允许点击之后全选内容，默认不允许 | | colorOption | ColorOption | 颜色选项 | | explainOption | ExplainOption | 说明字段 | | hide | boolean | 是否为隐藏字段，仅用于填充表单的字段，不显示在页面上 | | maxLength | number | input控件的输入长度 | | selectOption | SelectOption | 控件为Select时，选项列表 | | inputNumber | InputNumber | number组件的选项，min、max、step | | onChangeEvent | Function | 控件的值改变事件 可用于控件间联动 | | onSearchEvent | Function | select选择器搜索事件 可用于更新备选集合 | | defaultLabel | any | select选择器不初始化的时候可以使用defaultLabel搭配value，设置默认值 | | preserveNumber | number | 需要保留小数的列的位数 |

ColorOption

| 参数 | 类型 | 说明 | | ----- | ------ | ---- | | *name | string | 字段 | | color | string | 颜色 |

ExplainOption

| 参数 | 类型 | 说明 | | ----- | ------ | -------- | | *name | string | 字段 | | *show | string | 是否显示 | | color | string | 颜色 |

InputNumber

| 参数 | 类型 | 默认值 | 说明 | | ---- | ------ | -------- | ------ | | min | number | 0 | 最小值 | | max | number | 99999999 | 最大值 | | step | number | 1 | 步阶 |

SelectOption

| 参数 | 类型 | 默认值 | 说明 | | -------------------------- | ---------- | ------ | ------------------------------------------------------------ | | *label | string | | label字段，取selectList数组中的某个字段作为选择器label | | *value | string | | Value字段，取selectList数组中的某个字段作为选择器value | | selectList | Array | | 选项列表 | | selectListName | String | | 选项列表为数据object的某个字段的时候，增加hide viewdom，selectListName设置为该hide viewdom的name | | showLabelAndValue | boolean | false | 选项同时展示label和value，格式：[value]label | | hdDropdownMatchSelectWidth | boolean | false | 选择框长度是否和控件长度保持一致，默认不保持 |

11、间隔(hd-space)

效果图(组件间的空白区域)

示例

<hd-space background="#fff" type="row" size="12"></hd-space>

说明

| 参数 | 类型 | 默认值 | 说明 | | ---------- | --------- | --------- | ----------------------- | | background | string | 'inherit' | 加载中 | | type | SpaceType | | 类型，'row' | 'column' | | size | number | | 高度 | 宽度 |

12、小标题(hd-tip)

效果图

示例

<hd-tip title="基本信息" [fontSize]="14"></hd-tip>
<hd-tip title="新增" [showIcon]="false" [fontSize]="16"></hd-tip>

说明

| 参数 | 类型 | 默认值 | 说明 | | -------- | ------ | ------ | ---------------------- | | showIcon | boolen | true | 是否显示前面的竖线icon | | fontSize | number | | 字体大小 | | title | string | False | 标题文案 |

TODO

• [x] 文档示例
• [x] 更新记录
• [x]