Web Demo Mobile Demo Angular Demo Vue Demo React Demo

文件按钮 FileButton

源代码
import { Component, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
	selector: 'app-root',
	template: `
		<h2>Select Files</h2>
		<eui-panel style="width:600px">
			<eui-panel-header>
				<eui-filebutton accept="image/*" style="width:80px"
						[multiple]="true"
						[autoUpload]="false"
						(select)="onFileSelect($event)">Select Files...</eui-filebutton>
				<eui-linkbutton (click)="files=[]" style="width:80px">Clear</eui-linkbutton>
			</eui-panel-header>
			<eui-datalist [data]="files" [border]="false" style="min-height:100px">
				<ng-template euiItemTemplate let-row>
					<div class="fileitem">
						<img [src]="row.url">
						<div class="name">{{row.name}}</div>
						<div class="size">{{row.size}}</div>
						<eui-linkbutton iconCls="icon-clear" [plain]="true" (click)="removeFile(row)"></eui-linkbutton>
					</div>
				</ng-template>
			</eui-datalist>
		</eui-panel>
	`,
	styles: [`
		.fileitem{
			height: 70px;
			padding: 10px;
			font-size: 14px;
			display: flex;
			align-items: center;
		}
		.fileitem img{
			width: 50px;
			height: 50px;
		}
		.fileitem .name{
			margin: 0 20px;
			flex: 1;
		}
		.fileitem .size{
			margin: 0 20px;
			text-align: right;
		}
	`],
	encapsulation: ViewEncapsulation.None
})
export class AppComponent {
	files: File[] = [];

	constructor(private sanitizer: DomSanitizer){}

	onFileSelect(event){
		event.forEach((file) => {
			file.url = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(file)));
		});
		this.files = this.files.concat(event);
	}

	removeFile(file){
		let index = this.files.indexOf(file);
		if (index >= 0){
			this.files = this.files.filter((file,i) => i != index);
		}
	}
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';


import { AppComponent }   from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpModule,
    EasyUIModule
  ]
})
export class AppModule { }


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);