美文网首页
前端实现点击复制功能,兼容Safari浏览器 @令狐张豪

前端实现点击复制功能,兼容Safari浏览器 @令狐张豪

作者: 令狐张豪 | 来源:发表于2021-12-28 15:01 被阅读0次

    介绍:clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件,支持很多主流浏览器,包括Safari

    //引入方式
    <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.js"></script>
    

    clipboard 得使用 input或者textarea这种带有value属性的标签

    • 我们可以把input或者textarea写到最外面让客户看不到
    //html代码
    
    //input的value里写我们要复制的内容
    //data-clipboard-target要对应上input的id名或者类名
    <input id="foo" type="text" value="miyamibao" style="position: absolute;top: -1000px;" readonly>
    
     <div class="list copy" data-clipboard-action="copy" data-clipboard-target="#foo" @click="copy">
          <span>微信客服</span>
          <p>miyamibao</p>
          <img src="./images/right.png" alt="">
    </div>
    
    //下面写点击事件
            copy() {
                var clipboard = new ClipboardJS('.copy');
                clipboard.on('success', function(e) {
                    console.log(e);
                    vant.Toast({
                        message: '复制成功'
                    });
                    clipboard.destroy()
                });
    
                clipboard.on('error', function(e) {
                    vant.Toast({
                        message: '复制失败'
                    });
                    console.log(e);
                });
    
            },
    

    end~~~

    如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!
    文章对您有所帮助请给作者点个赞支持下,谢谢~

    相关文章

      网友评论

          本文标题:前端实现点击复制功能,兼容Safari浏览器 @令狐张豪

          本文链接:https://www.haomeiwen.com/subject/htppqrtx.html