1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-mypreview',
templateUrl: './mypreview.component.html',
styleUrls: ['./mypreview.component.css']
})
export class MypreviewComponent implements OnInit {
@Input() src: string; //图片资源地址
@Input() isShowTip = true; //是否展示
@Input() preSize = 100; // 缩略图尺寸
@Input() showSize = 700; //展示尺寸
constructor() { }
ngOnInit() {
this.changeSize();
}
private _src = '';
private changeSize() {
this._src = this.src.replace(`/${this.preSize}x${this.preSize}/`, `/${this.showSize}x${this.showSize}/`);
}
showPreview($event): boolean {
if (this.isShowTip === false) {
return false;
}
let pageHeight = $event.pageY; // 图片在body中的高度位置
let pageWidth = $event.pageX; // 图片在body中的宽度位置
let preTip = document.createElement('div');
preTip.setAttribute('id', 'preTip');
preTip.style.zIndex = '99';
preTip.style.bottom = window.document.body.scrollHeight - pageHeight - 250 + 'px';
preTip.style.left = pageWidth > window.document.body.clientWidth/2 ? pageWidth - this.showSize - 50 + 'px' : pageWidth + 50 + 'px';
preTip.style.position = 'absolute';
let preImg = document.createElement('img');
preImg.setAttribute('src', this._src);
preImg.style.width = '700px';
preImg.style.height = '700px';
preTip.appendChild(preImg)
window.document.querySelector('body').appendChild(preTip); //把它追加到文档中
return true;
}
removePreview() {
this.isShowTip !== false && window.document.body.removeChild(window.document.querySelector('#preTip'));
}
}
|