Bite-ui NPM | npm.io

Angular版本

当前支持的angular版本^10.0.0

TODO List

bite.css
button
upload
drawer
dynamic form
pdf view
image view
smart select
...

快速开始

创建一个项目

推荐使用@angular/cli创建你的项目

ng new New-Project

安装:

$ cd New-Project
$ npm i bite-ui

引入

import { UploadModule } from 'bite-ui/upload';
import { ButtonModule } from 'bite-ui/button';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonModule,
    BrowserAnimationsModule,
    UploadModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

button

<!-- demo -->
<bite-button type="flat" color="primary" [loading]="false">Btn</bite-button>

  @Input() type?: 'flat' | 'stroked' | 'basic' | 'raised' = 'basic';
  @Input() disabled?: boolean;
  @Input() loading?: boolean = false;
  @Input() translate?: 'denied' | 'access' = 'access';
  @Input() color?: 'primary' | 'accent' | 'warn' | '' = '';
  @Input() dark?: boolean = false;
  @Input() full?: boolean = false;
  @Input() size?: 'mini' | 'middle' | 'large' = 'middle';
  @Input() border?: boolean;
  @Output() clickEvent = new EventEmitter<any>();

upload

<!-- demo -->
<bite-upload></bite-upload>

  /**
   * @description 上传文件的请求方法
   * @param file 
   * @param container 
   */
  @Input() uploadFileFn

  @Input() accept?: string;
  @Input() acceptTip?: string;
  @Input() title?: string;
  @Input() disabled?: boolean;
  @Input() value?: any;
  @Input() defaultValue?:any; // 异步回显值
  @Input() loading?: boolean;
  @Input() touch?: boolean;
  @Output() resultEvent = new EventEmitter<any>();
  @Output() resetTouch = new EventEmitter<any>();

  // uploadFileFn demo
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';

  import { map, catchError } from 'rxjs/operators';
  enum FileContainer {
    SHARE = 'share', // 私桶
    PUBLIC = 'public', // 公桶
  }
  class Res {
    code: number;
    data: any;
    msg: string;
    errors?: any;
    errorKey?: any;
    success?: boolean;
    constructor(code: number, data: object, msg: string, errorKey: any, success: boolean) {
        this.code = code;
        this.data = data;
        this.msg = msg;
        this.errorKey = errorKey;
        this.success = success;
    }
  }
  @Injectable({
    providedIn: 'root'
  })
  export class CommonService {

    constructor(
      public http: HttpClient
    ) { }


    /**
     * @description 上传文件
     * @param file 
     * @param container 
     */
    public uploadFile(file: File, container?: FileContainer, http = this.http): Observable<any> {
      const url = 'https://dev1.bite.dev/api/v1.0/file/upload';
      const formData = new FormData();
      formData.append('file', file);
      if (container) {
        formData.append('container', container);
      }
      console.info('111', http)
      
      return http.post(url, formData).pipe(
        map((res: Res) => {
          if (res.success) {
            return res.data;
          }
          throw { msg: res?.msg || 'some error', errorKey: res?.errorKey };
        })
      )
    }
  }