vue-directive__自定义指令
1.复制
/**
* v-copy
* 复制某个值至剪贴板
* 接收参数:string类型/Ref<string>类型/Reactive<string>类型
*/
import type { Directive, DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {
copyData: string | number;
__handleClick__: any;
}
const copy: Directive = {
mounted(el: ElType, binding: DirectiveBinding) {
el.copyData = binding.value;
el.addEventListener("click", handleClick);
},
updated(el: ElType, binding: DirectiveBinding) {
el.copyData = binding.value;
},
beforeUnmount(el: ElType) {
el.removeEventListener("click", el.__handleClick__);
}
};
// 复制到剪贴板:旧方法(已弃用)
// function handleClick(this: any) {
// const input = document.createElement("input");
// input.value = this.copyData.toLocaleString();
// document.body.appendChild(input);
// input.select();
// document.execCommand("Copy");
// document.body.removeChild(input);
// ElMessage({
// type: "success",
// message: "复制成功"
// });
// }
// 复制到剪贴板:新方法
function handleClick(this: any) {
navigator.clipboard.writeText(this.copyData.toLocaleString()).then(() => {
ElMessage({
type: "success",
message: "复制成功"
});
}, () => {
ElMessage({
type: "error",
message: "复制失败"
});
});
}
export default copy;
原文地址:http://www.cnblogs.com/miyagi-jiye/p/16787259.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性