- 这里我们使用clipboard来实现
介绍: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~~~
如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!
文章对您有所帮助请给作者点个赞支持下,谢谢~
网友评论