d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { InputBoolean } from 'ngx-tethys/core';
import { ThyNotifyService } from 'ngx-tethys/notify';
import { TooltipService } from 'ngx-tethys/tooltip';

import { coerceElement } from '@angular/cdk/coercion';
import { DOCUMENT } from '@angular/common';
import {
    Directive,
    ElementRef,
    EventEmitter,
    HostListener,
    Inject,
    Input,
    OnDestroy,
    OnInit,
    Output,
    ViewContainerRef
} from '@angular/core';

export interface ThyCopyEvent {
    isSuccess: boolean;
    event: Event;
}

/**
 * @name thyCopy
 */
@Directive({
    selector: '[thyCopy]',
    providers: [TooltipService],
    standalone: true
})
export class ThyCopyDirective implements OnInit, OnDestroy {
    /**
     * 默认为点击标签，可传复制目标标签
     */
    @Output() thyCopy = new EventEmitter<ThyCopyEvent>();

    /**
     * 复制成功时的文案
     */
    @Input() thyCopySuccessText = '复制成功';

    /**
     * 提示文案
     */
    @Input() thyCopyTips = '点击复制';

    /**
     * 偏移量
     */
    @Input() thyCopyTipsOffset: number;

    /**
     * 当为 string 时，复制的是传入的内容；当为 ElementRef | HTMLElement 时，复制的是 dom 节点的 value 或者 textContent
     */
    @Input() thyCopyContent: string | ElementRef | HTMLElement;

    /**
     * 是否展示通知
     */
    @Input() @InputBoolean() thyShowNotify = true;

    constructor(
        @Inject(DOCUMENT) private document: any,
        public tooltipService: TooltipService,
        private elementRef: ElementRef<HTMLElement>,
        private viewContainerRef: ViewContainerRef,
        private notifyService: ThyNotifyService
    ) {}

    ngOnInit() {
        this.tooltipService.attach(this.elementRef, this.viewContainerRef, 'hover');
        this.tooltipService.thyTooltipDirective.content = this.thyCopyTips ? this.thyCopyTips : '点击复制';
        this.tooltipService.thyTooltipDirective.tooltipOffset = this.thyCopyTipsOffset;
    }

    private getContent(event: Event) {
        if (typeof this.thyCopyContent === 'string') {
            return this.thyCopyContent;
        } else {
            const target = this.thyCopyContent ? coerceElement(this.thyCopyContent) : event.target;
            return target.value || target.textContent;
        }
    }
    @HostListener('click', ['$event'])
    public onClick(event: Event) {
        const textarea = this.document.createElement('textarea');
        this.document.body.appendChild(textarea);
        textarea.value = this.getContent(event);
        textarea.select();
        try {
            document.execCommand('copy', false, null);
            this.thyCopy.emit({ isSuccess: true, event });
            if (this.thyShowNotify) {
                this.notifyService.success(this.thyCopySuccessText);
            }
        } catch (err) {
            this.thyCopy.emit({ isSuccess: false, event });
            if (this.thyShowNotify) {
                this.notifyService.error('复制失败');
            }
        } finally {
            textarea.remove();
        }
    }

    ngOnDestroy() {
        this.tooltipService.detach();
    }
}

1	import { InputBoolean } from 'ngx-tethys/core';
2	import { ThyNotifyService } from 'ngx-tethys/notify';
3	import { TooltipService } from 'ngx-tethys/tooltip';
4
5	import { coerceElement } from '@angular/cdk/coercion';
6	import { DOCUMENT } from '@angular/common';
7	import {
8	Directive,
9	ElementRef,
10	EventEmitter,
11	HostListener,	1✔
12	Inject,
13	Input,	×
14	OnDestroy,	×
15	OnInit,	×
16	Output,	×
17	ViewContainerRef	×
18	} from '@angular/core';	×
19		×
20	export interface ThyCopyEvent {	×
21	isSuccess: boolean;	×
22	event: Event;
23	}
24		×
25	/**	×
26	* @name thyCopy	×
27	*/
28	@Directive({
29	selector: '[thyCopy]',	×
30	providers: [TooltipService],	×
31	standalone: true
32	})
33	export class ThyCopyDirective implements OnInit, OnDestroy {	×
34	/**	×
35	* 默认为点击标签，可传复制目标标签
36	*/
37	@Output() thyCopy = new EventEmitter<ThyCopyEvent>();
38		×
39	/**	×
40	* 复制成功时的文案	×
41	*/	×
42	@Input() thyCopySuccessText = '复制成功';	×
43		×
44	/**	×
45	* 提示文案	×
46	*/	×
47	@Input() thyCopyTips = '点击复制';
48
49	/**
50	* 偏移量	×
51	*/	×
52	@Input() thyCopyTipsOffset: number;	×
53
54	/**
55	* 当为 string 时，复制的是传入的内容；当为 ElementRef \| HTMLElement 时，复制的是 dom 节点的 value 或者 textContent
56	*/	×
57	@Input() thyCopyContent: string \| ElementRef \| HTMLElement;
58
59	/**
60	* 是否展示通知	×
61	*/
62	@Input() @InputBoolean() thyShowNotify = true;	1✔
63
64	constructor(
65	@Inject(DOCUMENT) private document: any,
66	public tooltipService: TooltipService,
67	private elementRef: ElementRef<HTMLElement>,
68	private viewContainerRef: ViewContainerRef,
69	private notifyService: ThyNotifyService	1✔
70	) {}
71
72	ngOnInit() {
73	this.tooltipService.attach(this.elementRef, this.viewContainerRef, 'hover');
74	this.tooltipService.thyTooltipDirective.content = this.thyCopyTips ? this.thyCopyTips : '点击复制';
75	this.tooltipService.thyTooltipDirective.tooltipOffset = this.thyCopyTipsOffset;
76	}
77
78	private getContent(event: Event) {
79	if (typeof this.thyCopyContent === 'string') {	1✔
80	return this.thyCopyContent;
81	} else {
82	const target = this.thyCopyContent ? coerceElement(this.thyCopyContent) : event.target;
83	return target.value \|\| target.textContent;	1✔
84	}
85	}
86	@HostListener('click', ['$event'])
87	public onClick(event: Event) {
88	const textarea = this.document.createElement('textarea');
89	this.document.body.appendChild(textarea);
90	textarea.value = this.getContent(event);
91	textarea.select();
92	try {
93	document.execCommand('copy', false, null);
94	this.thyCopy.emit({ isSuccess: true, event });
95	if (this.thyShowNotify) {
96	this.notifyService.success(this.thyCopySuccessText);
97	}
98	} catch (err) {
99	this.thyCopy.emit({ isSuccess: false, event });
100	if (this.thyShowNotify) {
101	this.notifyService.error('复制失败');
102	}
103	} finally {
104	textarea.remove();
105	}
106	}
107
108	ngOnDestroy() {
109	this.tooltipService.detach();
110	}
111	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous