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

2021-12-28  本文已影响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属性的标签

//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~~~

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

上一篇下一篇

猜你喜欢

热点阅读