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通用
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- angular6.0版本是google在angularjs上进行一次大的升级,提高了性能 更改了API方面的知识。...
- 在我们项目开发中常常会有这样的需求 - 实现复制功能,用传统的方式不仅代码繁琐还不方便,为此利用vue指令的方式来...