实现代码如下

<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">X</span>
</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.data1
console.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;
}

 

angular小练习--手写弹出窗口以及文件上传或者复制粘贴,后读取打印文件内容的更多相关文章

  1. js+jquery手写弹出提示框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js 弹出窗口 防止拦截,突破阻止,保存后打开

    <script language="javascript"> function orderprint() { var formUrl = "savedata_ ...

  3. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  4. Angular 10材质的模态弹出示例和教程

    在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口. 在这里,我们将研究创建Angular 10项目,安装和设置Angular 10材质,以及创建自定义材质模块文件. 在本教程中, ...

  5. java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 使用过程 和servlet差不多

    java nio 写一个完整的http服务器  支持文件上传   chunk传输    gzip 压缩      也仿照着 netty处理了NIO的空轮询BUG        本项目并不复杂 代码不多 ...

  6. 文件上传小技巧/后端处理【以php示例】

    引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上 ...

  7. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  8. 在HTML网页中设置弹出窗口的办法

    [1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...

  9. js弹出窗口总结6种弹窗方法

    注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close(); ...

  10. JavaScript 之 弹出窗口总结

    一.javascript 控制窗口关闭及刷新 //关闭弹窗 <script language="javascript"> window.close(); </sc ...

随机推荐

  1. PMM实现监控Mysql-MGR

    一.docker安装PMM服务端 1.安装yum配置单元 # 如果已安装,略过此步 yum install -y yum-utils #yum配置单元 2.配置docker阿里云yum源 #配置doc ...

  2. Android开发 对接微信分享SDK总结

    原文:Android开发 对接微信分享SDK总结 - Stars-One的杂货小窝 公司项目需要对接微信分享,本来之前准备对接友盟分享的,但友盟的分享实际参数太多,而我又只需要对接一个微信分享,于是便 ...

  3. Go语言核心36讲50

    作为拾遗的部分,今天我们来讲讲与Go程序性能分析有关的基础知识. Go语言为程序开发者们提供了丰富的性能分析API,和非常好用的标准工具.这些API主要存在于: runtime/pprof: net/ ...

  4. libc-bin : Depends: libc6 (< 2.20) but 2.27-3ubuntu1 is installed问题解决

    为了下载代码,在计算云上按照某个傻瓜文档操作后,ubuntu不仅没达到预定效果,反而无论如何操作,都出现 root@SZX1000450533:/var/lib/dpkg# apt-get autor ...

  5. 关于 .NET 在不同操作系统中 IO 文件路径拼接方法结升级 .NET 7 后注意到的一个小坑

    .NET 现在支持跨平台这件事情已经是众所周知的特点了,虽然平台整体支持跨平台了,但是我们的代码如果真的想要实现跨平台运行其实还是有些小细节要注意的,今天想要记录分享的就是关于 文件I/O操作时路径的 ...

  6. 关于python导包问题(新手向)

    包和模块 首先要弄清这两个概念, 在python 中 一个文件夹中包含__init__.py 文件(这个文件是包的初始化文件,在你导入包或包下面的模块的时候,这个文件会最开始运行),就会被python ...

  7. 关于更改 lightdm 主题的方法

    lightdm 是一个显示管理器,它支持很多种 greeter lightdm 的主要配置文件都在 /etc/lightdm 目录下面 各个文件的作用: 配置文件名称 作用 图形化界面配置工具 lig ...

  8. form enctype="multipart/form-data" ajax 文件上传

    <form method="post" enctype="multipart/form-data" id="resource"> ...

  9. MySQL 常用到的几个字符处理函数

    修改某字段的内容,用于英文 首先解释用到的函数: CONCAT(str1,str2)字符连接函数 UPPER(str)将字符串改为大写字母 LOWER(str)将字符串改为小写字母 LENGTH(st ...

  10. 【大数据】kafka-02:Kafka Connect内容、原理及使用

    〇.概述 1.常见资料 (1)confluent https://docs.confluent.io/5.4.0/connect/kafka-connect-jdbc/sink-connector/s ...