vue 使用clipboard.js实现点击复制内容到剪贴板

可以使用 CDN 或 下载 ,设置好引用路径

DOM结构,【注意红色部分】

<ui-button class="copybtn" data-clipboard-text="'卡号:'+{{item.card_sn}}+' '+'卡密:'+{{item.card_pass}}" bindtap="copypwd">复制</ui-button>

 JS部分

 //实例化 ClipboardJS对象;
        var copyBtn = new clipboard('.copybtn');

        copyBtn.on("success",function(e){
            // 复制成功
            // alert(e.text);
            e.clearSelection();
            ui.showToast({
              title:'复制成功',
              icon:'success'
            })
            console.log('复制成功,内容是:'+e.text);
        });
        copyBtn.on("error",function(e){
          ui.showToast({
              title:'复制失败,请稍后再试。',          
            })
            //复制失败;
            console.log( e.action )
        });

e.text指的就是DOM部分的data-clipboard-text属性

文章引用:https://blog.csdn.net/fly_wugui/article/details/80327385

展开阅读全文

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