[西安|结业弟子]JS-刘思安|2020年06月12日的日报-技能树.IT修真院

发表于： 2020-06-12 22:41:54

1 2258

今日完成

优化js6上传图片的逻辑

修改进度条样式

优化日期选择器不可选择当天之后的日期

进度条使用组件替换

使用框架的icon图标

 <td>
            <!-- 进度条 -->
            <nz-progress
              [nzPercent]="ProgressPercent"
              [nzWidth]="4"
              [nzShowInfo]="false"
            ></nz-progress>
          </td>
          <td>
            <span>
              <i
                class="nz-icon"
                *ngIf="imgMsg.status === 3"
                nz-icon
                nzType="loading"
                style="color: blue;"
              ></i>
              <i
                class="nz-icon"
                *ngIf="imgMsg.status === 1"
                nz-icon
                nzType="check"
                style="color: green;"
              ></i>
              <i
                class="nz-icon"
                *ngIf="imgMsg.status === 0"
                nz-icon
                nzType="close"
                style="color: red;"
              ></i>
            </span>

进度条百分比

this.ProgressPercent = (event.loaded / event.total) * 100;

限制上传类型和大小

let file = (<HTMLInputElement>document.querySelector('#img')).files[0];


    // 限制上传图片大小和类型
    if (file.size > 1500000 || !/image/.test(file.type)) {
      console.log(/image/.test(file.type))
      this.subError('请确认图片格式且大小不超过1.5MB', false);
    } else {

<nz-range-picker
        [nzDisabledDate]="disabledDate"
        [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
        nzFormat="yyyy-MM-dd HH:mm"
        [nzPlaceHolder]="['起始更新日期', '终止更新日期']"
        ngModel
        (ngModelChange)="dateChange($event)"
      ></nz-range-picker>

调用fns的工具

from 'date-fns/differenceInCalendarDays';
  // 限制选择今天之后的日期
  disabledDate = (current: Date): boolean => {
    let today = new Date();
    return differenceInCalendarDays(current, today) > 0;
  };