angular小练习--手写弹出窗口以及文件上传或者复制粘贴，后读取打印文件内容...

实现代码如下

<page-header><ng-template>ng-template>
page-header>
<div><nz-button-group><button nz-button nzType="primary">新增button><button nz-button>编辑button><button nz-button (click)="myBlackBoxChange=true">打开黑框button><button nz-button>删除button><button nz-button nzType="default">刷新button><button nz-button nzType="default">保存button>nz-button-group><nz-button-group><button nz-button nzType="primary"><i nz-icon nzType="left">i>上一个button><button nz-button nzType="primary">下一个<i nz-icon nzType="right">i>button>nz-button-group>
div>
<div se-container="1" class="mybox"><div class="left-box"><se label="单号选择"><nz-select [(ngModel)]="mystatus"  [nzPlaceHolder]="'请选择'" class="myselect"><nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx">nz-option>nz-select>se><se label="单号选择"><nz-select [(ngModel)]="mystatus" name="status" id="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" class="myselect"><nz-option >选项一nz-option>nz-select>se><se label="单号选择"><nz-select [(ngModel)]="mystatus" name="status" id="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" class="myselect"><nz-option >选项一nz-option>nz-select>se>div>
div>
<div class="myBlack" *ngIf="myBlackBoxChange"  ><nz-card class="myBlackBox"><div style="position: relative; ">请把SN贴入下框<span style="position:absolute; right: -14px;top: -24px;cursor: pointer;" (click)="myBlackBoxChange=false">Xspan>div><textarea rows="8" nz-input [(ngModel)]="myinputValue">textarea><div style="text-align: center;margin-top:10px;line-height: 50px"><span>请span><button nz-button  (click)="loadTwo()" [nzLoading]="isLoadingTwo" style="z-index: 9999"><i nz-icon nzType="poweroff">i>确认提交button><span>或者span><div style="text-align: center;display:inline-block;line-height: 50px"><span class=" fileinput-button"><span nz-button nzType="primary" style="display:inline-block;line-height: 30px">点击上传文件span><input type="file" (change)="myUpload($event)">span>div>div>nz-card>div>

import { Component, OnInit, ViewChild, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';
import { tap, map } from 'rxjs/operators';
import Clipboard from '../../../../clipboard.min.js';
import { STComponent, STColumn, STData, STChange } from '@delon/abc';@Component({selector: 'app-wlblock',templateUrl: './wlblock.component.html',styleUrls: ['./wlblock.component.less']
})
export class WlblockComponent implements OnInit {private status = [];private mystatus;private myData2;private myData;private myBlackBoxChange:boolean = false;isLoadingTwo = false;private myinputValue;constructor(private http:_HttpClient ) { }ngOnInit() {//初始化时候，异步请求服务器端的首页数据let url='http://localhost:4200/assets/myjson/mydata.json';this.http.get(url).subscribe((res:any)=>{this.status=res.data1console.log(this.status)})}myclick(e:MouseEvent){e.preventDefault();console.log(e)}getData1(e){var clipboard = new Clipboard('btn');clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();
});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);
});}loadTwo(): void {this.isLoadingTwo = true;setTimeout(() => {this.isLoadingTwo = false;}, 5000);console.log(this.myinputValue)}myUpload(e){console.log(e)let fileReader = new FileReader();fileReader.onload=()=>{console.log(fileReader.result)}// fileReader.readAsText(e.target.files[0], 'utf-8')fileReader.readAsText(e.target.files[0])}
}

.mybox{display:flex;justify-content: center;align-items: center;padding-top:30px;.left-box,.right-box{width:50%;min-width: 350px;clear: both;}.myselect{width:200px;}
}
.myBlack{width: 100%;height: 100vh;position: absolute;left:0;top:0;background-color: rgba(0,0,0,0.4);.myBlackBox{width: 600px;height: 350px;position: absolute;left:50%;top:50%;margin:-150px 0 0 -200px;}}
textarea{resize: none;
}
.fileinput-button {position: relative;// display: inline-block;overflow: hidden;cursor: pointer;
}.fileinput-button input{position:absolute;right: 0px;top: 0px;opacity: 0;-ms-filter: 'alpha(opacity=0)';font-size: 30px;
}

转载于:https://www.cnblogs.com/sugartang/p/11415655.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！