html
<a [appCopy]="td?.orderNo">复制</a>
ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import Clipboard from "clipboard";
@Directive({
selector: '[appCopy]'
})
export class CopyDirective {
@Input("appCopy") value;
/** 监听元素的click事件 */
@HostListener('click') onClick() {
this.copy()
}
constructor(
private msg: NzMessageService,
private ele: ElementRef
) {}
copy(){
const clipboard = new Clipboard(this.ele.nativeElement, {
text: () => {
return this.value
}
});
clipboard.on('success', e => {
this.msg.success("复制成功")
// 释放内存, 一定要清除事件，不然msg会弹出很多次
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.msg.warning("该浏览器不支持自动复制")
// 释放内存，一定要清除事件，不然msg会弹出很多次
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
// 通过调试源码发现，传入的this.ele.nativeElement缺少currentTarget属性，在这里手动加上currentTarget属性
const target = this.ele.nativeElement;
target.currentTarget = this.ele.nativeElement;
// 默认需要调用一次，不然第一次点击无效
clipboard.onClick(target);
}
}
复制指令angular、vue通用
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 在我们项目开发中常常会有这样的需求 - 实现复制功能，用传统的方式不仅代码繁琐还不方便，为此利用vue指令的方式来...
