最近公司有个功能,即点击按钮实现复制功能,我在网上参考了一些文档,亲测在手机端运行正常,兼容性也比较好,参考下面的网址可以解决我们的大部分需求:
网址:https://clipboardjs.com/
下面的例子我是用vue来写的:
1、npm安装
npm install clipboard --save
2、template中使用:
<div class="control">
<span class="txt">https://www.baidu.com</span>
<button class="btn tag-read" :data-clipboard-text="url" @click="copy">复制</button>
</div>
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()
})
}
}
}