ClipboardJS 实现点击复制功能
第一篇博客，有点小激动~~~
最近在做关于移动端点击复制内容的一个功能，同事说可以用 clipboard.js
先上一下自己的代码
data.assistant_wechat_num 这是我从后台返回的接口取的，就是我要复制的微信号码
<div class="bot_copy" :data-clipboard text="data.assistant_wechat_num">
<div class="copy_img">
<img src="/static/img/icon_fuzhi.png" alt="">
</div>
复制微信号
</div>
mounted() {
var clipboard = new ClipboardJS('.bot_copy');
clipboard.on('success', function(e) {
console.log(e);
alert('复制成功')
});
clipboard.on('error', function(e) {
console.log(e);
alert('复制失败，请手动复制')
});
},
大家可以去GitHub上看一下有很多的小demo，这里就先列举两个（都是我从官网上copy的~~~捂脸）
官网GitHub地址戳这里 https://github.com/zenorocha/clipboard.js
demo1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<div>hello</div>
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用 浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
demo2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用 浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
text: function() {
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
参考地址： https://blog.csdn.net/mp624183768/article/details/82256164
更多精彩
