用js实现一键复制功能

前导

这是一个很简单的功能,拆解出来其实只需要一步,调用clickboard的API即可实现

引入

首先要引入js
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

html代码:

copyMessage 就是我们最后要复制的内容,这里我设置的是个变量.需要在API中绑定 class="clickboard"

<div id="app"><div id="copy-cont"><a @click="copyFn" class="clickboard">{{copyMessage}}</a></div>
</div>

js代码

copyFn() {//复制方法var clickBoard = new ClipboardJS(".clickboard", {text: () => {return this.copyMessage;}});//复制成功clickBoard.on("success", (e) => {console.log(`已复制:${e.text}`)});//复制失败clickBoard.on("error", (e) => {console.log("error", e)})
}

这里有一个额外说明的事情,由于我们的copyMessage设置的是全局变量,所以clipboard取text的值的时候,要用到es6的箭头函数,否则作用域会在api方法中,无法识别这是一个全局变量.

用js实现一键复制功能相关推荐

利用js实现一键复制功能
HTML代码 <div hidden id="content">待复制的内容</div><btn class="btn btn-sm btn ...
JS实现一键复制功能
var copyClick = function (d) {var Url2 = $(d).parent().parent().find("#copy_value");Url2.s ...
vue中添加一键复制功能，贼好用！
在表格中复制链接的时候,总是要先用鼠标左键点击,拖动选中,然后右键复制或者ctrl+c复制,但是又会在粘贴的时候发现前面带有空格等烦人的问题.这个时候如果你有需要在三方平台转短链接的需求的话,链接粘贴 ...
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
JS实现一键展开、折叠所有树节点
在数据分析报表中,通常会有结构树展开的分析报表.在结构树节点较多的时候,逐个进行展开.折叠等操作时,会比较繁琐.费时间.费手劲:此处示例通过点击按钮的方式,使用js实现一键展开.折叠所有的树节点(不限 ...
微信小程序实现长摁复制和一键复制功能
微信小程序实现长摁复制和一键复制功能长按复制(一定是text标签) text设置属性 selectable="true" 这样长摁就可以复制了. <text selecta ...
前端JS实现一键导入excel表格
前端JS实现一键导入excel表格前端JS实现一键导入excel表格前端JS实现一键导入excel表格前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并 ...
使用Auto.js完成一键自动登录武汉理工大学鉴湖宿舍校园网（安卓手机端）
文章目录前言一.准备参考文章:[Auto.js实战](https://zhuanlan.zhihu.com/p/331532310) 下载Auto.js 关于表单的获取关于MAC地址的获取二 ...
使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示
最近再写一个简单的html官网移动端页面,需求是一键复制邀请码,再百度上找了好多例子各种尝试然后找到一种可以解决的办法 html部分 <input type="text" ...

用js实现一键复制功能

前导

引入

html代码:

js代码

用js实现一键复制功能相关推荐

最新文章

热门文章