clipboard 定义一个全局变量
import ClipboardJS from "clipboard";
if(clipboard){
clipboard.destroy();
} clipboard = new ClipboardJS(".copyLink");
clipboard.on("success", () => {
console.log(1);
this.$message.success("复制成功");
});
clipboard.on("error", () => {
this.$message.fail("复制失败");
});

  

在 clipboard = new ClipboardJS(".copyLink"); 执行前做销毁判断,避免多次监听。.copyLink 目标元素 class

clipboard 在 vue 项目中,on 事件监听回调多次执行的更多相关文章

  1. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  2. Java 中的事件监听机制

    看项目代码时遇到了好多事件监听机制相关的代码.现学习一下: java事件机制包含三个部分:事件.事件监听器.事件源. 1.事件:继承自java.util.EventObject类,开发人员自己定义. ...

  3. vue解惑之v-on(事件监听指令)

    一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...

  4. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  5. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  6. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  7. Java中的事件监听机制

    鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...

  8. jQuery中的事件监听小记

    一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...

  9. 简单剖析Node中的事件监听机制(一)

    使用js的class类简单的实现一个事件监听机制,不同于浏览器中的时间绑定与监听,类似于node中的时间监听,并且会在接下来的文章中去根据自己的理解去写一下Event模块中的原理. Node.js使用 ...

随机推荐

  1. HTML常用全部代码--第二部分--JAVASCRIPT( 小伙伴要牢记😁😁😁😁 )

    html代码大全--js部分:小技巧 (1) 点击关闭窗口<a href="javascript.:top.window.close();">点击关闭窗口</a& ...

  2. Xenia and Weights(Codeforces Round #197 (Div. 2)+DP)

    题目链接 传送门 思路 \(dp[i][j][k]\)表示第\(i\)次操作放\(j\)后与另一堆的重量差为\(k\)是否存在. 代码实现如下 #include <set> #includ ...

  3. 摘:JAVA JXL API的详细使用

    转自:http://www.cr173.com/html/10377_1.html 1 开发调研1.1 需求描述MS的电子表格(Excel)是Office的重要成员,是保存统计数据的一种常用格式.作为 ...

  4. 接口&调用接口

    接口: /** * 分页查询 * @param request * @param pageable * @return */ @GetMapping("/query-baseProductB ...

  5. 利用Python绘制一个正方形螺旋线

    1 安装turtle Python2安装命令: pip install turtule Python3安装命令: pip3 install turtle 因为turtle库主要是在Python2中使用 ...

  6. Spark RDD :Spark API--Spark RDD

    一.RDD的概述 1.1 什么是RDD? RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素 ...

  7. LeetCode 1027. Longest Arithmetic Sequence

    原题链接在这里:https://leetcode.com/problems/longest-arithmetic-sequence/ 题目: Given an array A of integers, ...

  8. http服务读取配置文件,交叉编译

    因为是在windows上编译的代码,在linux上不可执行,所以需要交叉编译 package main import ( "flag" "gopkg.in/ini.v1& ...

  9. 29-ESP8266 SDK开发基础入门篇--编写TCP 客户端程序(Lwip RAW模式,非RTOS版,精简入门)

    https://www.cnblogs.com/yangfengwu/p/11456667.html 由于上一节的源码长时间以后会自动断开,所以再做这一版非RTOS版的,咱直接用lua源码里面别人写的 ...

  10. 【JZOJ6210】【20190612】wsm

    题目 定义两个非递减数列的笛卡尔和数列\(C = A \oplus B\) 为\((A_i+B_j)\)排序后的非递减数列 \(W\)组询问,问有多少对可能的数列,满足: \(|C|=s,|A| = ...