方法一： 使用 js 实现
function copyToClipboard (text) {
if(text.indexOf('-') !== -1) {
let arr = text.split('-');
text = arr[0] + arr[1];
}
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = '0';
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
alert(msg);
} catch (err) {
alert('该浏览器不支持点击复制到剪贴板');
}
document.body.removeChild(textArea);
}
方法二： 使用 clipboard.min.js 实现
1.引入clipboard.min.js文件
2.选择一个可以确定被拷贝元素的选择器
3.定义一个button按钮，注意按钮的属性：
data-clipboard-action="copy" data-clipboard-target="test"
其中data-clipboard-target属性就是第二步你定义的选择器
4.书写js,建立clipboard对象以及复制后执行的方法
<!-- HTML -->
<div id="test">hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="test">Copy</button>
<!-- 引入JS -->
<script src="../static/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
方法三： Vue中使用 vue-clipboard2 实现
<template>
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Copy These Text',
}
},
methods: {
onCopy: function (e) {
alert('You just copied: ' + e.text)
},
onError: function (e) {
console.log(e)
alert('Failed to copy texts')
}
}
}
</script>
