使用clipboard.js实现复制功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33212500/article/details/80569751

最近在开发中,使用原生js复制时,发现在360 7.1的低版本中无法实现代码的复制,

随后便网上找了插件实现复制功能,检验后,发现在低版本也支持

demo:

<input id="contents" type="text" value="" style="position: relative;z-index: -9999 ">
<button class="ydCopy" @click="copyUri" data-clipboard-action="copy" data-clipboard-target="#contents">复制链接</button>

id为contents的input输入框是作为复制的目标对象,button作为点击按钮,图中button使用了vue,

js脚本中

copyUri: function () {

    /*var e=document.getElementById("contents");//对象是contents
    e.select(); //选择对象 (全选)
    document.execCommand("Copy"); //执行浏览器复制命令*/


   
var clipboard = new ClipboardJS('.ydCopy');

clipboard.on('success', function(e) {
  
    common.layer.msg("链接复制成功!");
});

clipboard.on('error', function(e) {
   
    layer.alert('链接复制失败,请手动复制下载地址:<br/> <span style="color: blue;">' + $('#contents').val() + '</span>', {
        skin: 'layui-layer-molv' //样式类名
        ,closeBtn: 0
    }, function(){
     
       layer.closeAll();
    });
});
}

三行代码解决!(引入clipboard.js 文件)


clipboard.js源码地址:https://github.com/zenorocha/clipboard.js

里面的demo模块中有具体的例子,简单且实用

没有更多推荐了,返回首页