clipboardjs实现点击拷贝复制

简介: clipboardjs实现点击拷贝复制

1、文档

英文:https://clipboardjs.com/

中文http://www.clipboardjs.cn/


2、安装

npm install clipboard --save

3、使用示例

demo.vue


<template>
  <div>
    <input type="text" v-model="message" />
    <button class="btn" :data-clipboard-text="message">Copy</button>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
  data: function() {
    return {
      message: "Copy These Text"
    };
  },
  mounted() {
    // 创建的时候就绑定事件
    var clipboard = new ClipboardJS(".btn");
    clipboard.on("success", function(e) {
      alert(e.text);
      console.log(e);
      e.clearSelection();
    });
    clipboard.on("error", function(e) {
      console.log(e);
    });
  }
};
</script>
相关文章
|
机器学习/深度学习 人工智能 数据可视化
【2024美赛】C题 Momentum in Tennis网球运动中的势头 25页中英文论文及Python代码
本文提供了一篇25页的中英文论文,针对2024美国大学生数学建模竞赛C题"网球运动中的势头",建立了数学模型来分析网球比赛中势头的形成和影响,并通过Python代码实现了模型的定量分析和可视化,同时对模型的合理性、影响因素、预测方法和战术策略进行了深入探讨。
577 3
【2024美赛】C题 Momentum in Tennis网球运动中的势头 25页中英文论文及Python代码
|
10月前
|
算法 测试技术 Swift
Kimi开源Moonlight-16B-A3B:基于Muon优化器的高效大模型,性能与效率双突破!
最近,Muon优化器在训练小规模语言模型方面展示了强大的效果,但其在大规模模型上的可扩展性尚未得到验证。
585 0
|
Web App开发 JavaScript 前端开发
Node.js的优缺点是?
【8月更文挑战第4天】Node.js的优缺点是?
625 4
|
Java Spring 容器
深入理解Spring Boot启动流程及其实战应用
【5月更文挑战第9天】本文详细解析了Spring Boot启动流程的概念和关键步骤,并结合实战示例,展示了如何在实际开发中运用这些知识。
454 2
|
人工智能 编解码 机器人
通义千问,又开源了!
通义千问,又开源了!
52264 66
通义千问,又开源了!
|
机器学习/深度学习 人工智能 物联网
智能家居技术在现代生活中的融合与创新
随着物联网和人工智能技术的飞速发展,智能家居已从科幻电影中走入现实生活。本文将探讨智能家居技术如何融入日常生活,提高生活品质,并分析其背后的关键技术。同时,文章将展望未来智能家居的发展趋势,包括个性化定制、数据安全以及跨品牌兼容性等挑战。
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的生活小助手微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的生活小助手微信小程序附带文章源码部署视频讲解等
135 0
|
安全 Java Android开发
构建高效Android应用:Kotlin与Jetpack实践指南
【5月更文挑战第29天】 在移动开发的世界中,效率和性能始终是核心诉求。随着技术的演进,Kotlin语言以其简洁性和功能性成为Android开发的首选。结合Jetpack组件的推广,开发者得以构建更高效、可维护且易于测试的应用。本文将深入探讨利用Kotlin语言特性以及Jetpack架构组件来优化Android应用的策略和技巧,旨在帮助开发者提升应用质量并降低维护成本。
|
前端开发 Java 应用服务中间件
GetWay网关过滤器工厂与全局过滤器
GatewayFilter是网关中提供的一种过滤器,可以对进入网关的请求和微服务返回的响应做处理:
526 0