首页 > 其他分享 >vue-directive__自定义指令

vue-directive__自定义指令

时间:2022-10-13 10:36:17浏览次数:66  
标签:__ el vue 自定义 handleClick binding copyData input

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;

标签:__,el,vue,自定义,handleClick,binding,copyData,input
From: https://www.cnblogs.com/miyagi-jiye/p/16787259.html

相关文章

  • 中文命名实体识别的实战代码
    基于BERT预训练的中文命名实体识别TensorFlow实现​​https://github.com/wusaisa/BERT-BiLSTM-CRF-NER​​用深度学习做命名实体识别​​​https://www.jianshu.com/p/495c......
  • Vue动态组件 表格
    Vue组件数据源//这里是HTML内容这里通过下面的引入框架结构把数据源传到框架中还有匹配项<Mytable:configList="configList":configData="configData"></Mytable>......
  • 测试用例的优先级
    在有限的测试资源和时间的情况下,尽早尽快在测试对象查找出尽可能多的缺陷很大程度上是由如何制定测试用例优先级决定的,因此测试用例优先级在一个测试项目中至关重要。......
  • 适配器模式
    实现一个双向适配器,使得猫可以学狗叫,狗可以学猫抓老鼠。  publicclassClient{publicstaticvoidmain(String[]args){Adapteradapter=newA......
  • 谷歌尝试次数过多解决方法
    谷歌账号登陆提示尝试次数过多,暂时无法登陆,这种情况下说明是谷歌在拦截你登陆。一般是因为ip环境异常或谷歌不信任此设备造成的,常见在苹果iPhone设备上。许多登陆DNF韩服谷......
  • React Hook :context上下文
    context1.Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有:InSomeCases,youwanttopassdatathroughthecomponenttreewithouthaving......
  • 实验4:开源控制器实践——OpenDaylight
    (一)基本要求1、利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight控制器;2、通过Postman工具调用OpenDaylight提供的API下发流表,实现拓扑内主机h1和h3网络中断10s......
  • 【STM32H7教程】第11章 STM32H7移植SEGGER的硬件异常分析
    ​​​​第11章      STM32H7移植SEGGER的硬件异常分析本章节为大家介绍SEGGER的硬件异常分析代码在MDK和IAR中的使用方法,在实际项目中比较有实用价值,因为我们经常会......
  • 实验5:开源控制器实践——POX
    *基础要求h1pingh2的tcpdump抓包结果h2pingh3的tcpdump抓包结果L2_learning模块代码流程图*个人总结实验难度:基本要求比较适中,进阶要求比较困难。......
  • 【安富莱二代示波器教程】第2章示波器操作说明及其介绍
    ​​​​第2章       示波器操作说明及其介绍本章节主要讲解示波器的操作说明及其相关介绍。2.1 示波器使用前注意事项2.2 示波器的按键操作说明2.3 示波器滑......