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

发表于： 2020-05-25 22:45:08

1 1676

今日完成

学习使用第三组件实现富文本编辑器和日期选择器功能

明日计划

继续推进任务细节优化完成编辑，上下线等功能

成果

日期选择器

使用的是ng-zooro ui框架

通过ng add ng-zorro-antd指令完成框架的初始化配置

根组件导入调用

import { NgZorroAntdModule } from 'ng-zorro-antd';

imports: [
BrowserModule,

NgZorroAntdModule
],

便可以使用相关的组件了

html

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

通过ngModelChange时间发生变化的回调来返回所选择的日期

[(ngModel)]="dateRange"双向数据绑定便于清空数据

dateChange(result: Date): void {
    if (result[0]) {
      let a = new Date(result[0])
      let b = new Date(result[1])
      // 将date对象转化为时间戳
      this.filter.startAt = a.getTime();
      this.filter.endAt = b.getTime();
    } else {
      this.filter.startAt = '';
      this.filter.endAt = '';
    }
  }

result返回两个Date对象如下

通过getTime()方法将Date对象转化为后台可以识别的时间戳

清空筛选数据时，将双向绑定的日期控件数据设为underfind即可清空日期控件

this.dateRange = undefined;

quill富文本编辑器

安装quill

npm install ngx-quill -save

导入调用

import { QuillModule } from 'ngx-quill';

imports: [
    BrowserModule,

    QuillModule.forRoot()
]

在index.html中调用

 <link
      href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.css"
      rel="stylesheet"
    />

使用该标签调用quill富文本编辑器

 <quill-editor placeholder="输入内容"></quill-editor>

quill的功能可以模块化定制，该功能还未学习，明日学习使用

返回列表

【任务3】 [西安|结业弟子]JS-刘思安 | 2020年05月25日 的日报 下品

评论

分享到

【任务3】 [西安|结业弟子]JS-刘思安 | 2020年05月25日的日报下品