html5页面ClipboardJS实现点击复制功能

最近公司有个功能,即点击按钮实现复制功能,我在网上参考了一些文档,亲测在手机端运行正常,兼容性也比较好,参考下面的网址可以解决我们的大部分需求:
网址:https://clipboardjs.com/
下面的例子我是用vue来写的:
1、npm安装

npm install clipboard --save

2、template中使用:

https://www.baidu.com

3、script中引入:

import Clipboard from "clipboard";
export default {
   data(){
       return {
            url:'https://www.baidu.com'
       }
   },
   methods:{
       copy() {
          var clipboard = new Clipboard('.tag-read')
          clipboard.on('success', e => {
              Toast('复制成功');
              // 释放内存
              clipboard.destroy()
          })
          clipboard.on('error', e => {
              // 不支持复制
              Toast('该浏览器不支持自动复制,请手动输入')
             // 释放内存
             clipboard.destroy()
          })
       }
    }
 }

你可能感兴趣的:(html5页面ClipboardJS实现点击复制功能)