在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪

brianway 发布于2019-08-23 15:35 / 3514人阅读

摘要：需求开发过程中遇到的需求需要复制请求过来的一段密令类似支付宝淘宝口令到剪切板。网上搜了下，是个相对比较靠谱的第三方。感谢大佬的评论意见使用该方法，会在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。

需求

开发过程中遇到的需求需要复制请求过来的一段密令（类似支付宝淘宝口令）到剪切板。

pc端的文本复制到剪切板

如果是在pc端的话，可以直接使用原生js进行编写，代码如下：

这是被复制的内容

但是这种方法在移动端会有一些问题，我是在微信公众号开发，发现在微信浏览器中会失效。

网上搜了下，clipboard.js是个相对比较靠谱的第三方。

clipboard.js

官方github

目前的star 25k ⭐️

大佬的中文翻译

概括一下

两种方式，一种适合复制固定的文本，另一种适合复制从后端获取的数据文本;

具体操作 安装

通过npm安装

npm install clipboard --save

通过script+链接导入,可以去BootCDN复制个自己想要的

使用

如果是vue文件，只需要在相关的组件中进行clipboard.js导入即刻。

import Clipboard from "clipboard";

编写需要进行复制的相关代码

如果是复制固定文本则如下：

如果是复制从服务器获取的数据则如下：

               //这个input可以进行相应的隐藏，例如绝对定位等    


....

methods: {
    handleCopy(){
        axios.post("请求链接").then(res=>{
            var input = document.getElementById("copy-input");
            input.value = res.data      //将获取的数据复制给input
            setTimeout(() => {
                  const copybtn = this.$refs.copy;
                  this.clipboard = new Clipboard(copybtn);
            }, 100);                      //利用延时器防止内容没有及时更新等导致报错
        })
    }
}

延时器代码部分，也可以使用vue提供的 nextTick 方法。 //感谢 Grewer 大佬的评论意见

使用该方法，会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。代码如下：

this.$nextTick(() => {
    const copybtn = this.$refs.copy;
    this.clipboard = new Clipboard(copybtn);
});

也可以做一些复制成功与否的判断：

clipboard.on("success", function(e) {
    console.info("Action:", e.action);
    console.info("Text:", e.text);
    console.info("Trigger:", e.trigger);
    alert("复制成功，您复制的链接为"+e.text);
    e.clearSelection();
});

clipboard.on("error", function(e) {
    console.error("Action:", e.action);
    console.error("Trigger:", e.trigger);
    alert("复制失败")
});

这位大佬的demo代码也可以进行参考，亲测有用 -> 使用clipboard.js实现js复制黏贴的功能

可能存在的兼容性问题

网上说这个插件可能存在一些兼容性问题，我自己测试了多个手机，包括安卓和ios，暂时还未发现有兼容问题的存在，如果遇到了我再来及时更新

最后

感谢各位大佬的参阅，如果有什么问题都可以在评论区提出。

如果觉得对您有帮助的话，也可点个赞，点个收藏，点关注不迷路。

GPU云服务器云服务器移动支付宝 Win10支付宝插件在装配体中添加配合 Win10无法使用支付宝插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102294.html

在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪

摘要：需求开发过程中遇到的需求需要复制请求过来的一段密令类似支付宝淘宝口令到剪切板。网上搜了下，是个相对比较靠谱的第三方。感谢大佬的评论意见使用该方法，会在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。需求开发过程中遇到的需求需要复制请求过来的一段密令（类似支付宝淘宝口令）到剪切板。 pc端的文本复制到剪切板如果是在pc端的话，可以直接使用原生js进...

Lyux 2019-08-02 14:24 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
H5剪切板功能

摘要：复制内容到剪贴板插件官网地址引用方式默认是截取中的的属性值截取输入框中的值里面还有很多高级用法可以前往官网逻辑更多细节官网框架提供的剪切板插件最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况： 1.不带input输入框的原生js方法这种情况适用于复制非...

Developer 2019-08-22 18:20 评论0 收藏0