Introduce jQuery and clipboard files
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
Static copy
<button id="copy2" data-clipboard-text="imageim101">Copy the WeChat ID and add it</button>
var btns = document.querySelectorAll('#copy2');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
Dynamic replication
//copyTarget is used to hold the content to be copied
<div id="copyTarget" style="opacity: 0;"></div>
//Copy in the loop list
<div class="codeList">
<template v-for='(codeitem,index) in item.codeList'>
<div class="codeItem">
<span class="s1">{ {codeitem.code}}</span><span class="s2 copy" :data-param="codeitem.code" data-clipboard-action='copy'>复制</span>
</div>
</template>
</div>
//Copy the content after requesting the backend to return
<div class="linkItem copy" data-param="link" data-clipboard-action='copy'>
<p>Copy link</p>
</div>
//Copy function
var clipboard = new ClipboardJS('.copy',{
target: function(e) {
var param = $(e).data("param");
if(param=='link'){//copy link
getCopyData($(this));
}else{//copy reading code
$("#copyTarget").text(param);
}
return document.querySelector('#copyTarget'); //Copy label text
}
});
clipboard.on('success', function(e) {
alert('Copy account information successfully');
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
function getCopyData(param){
//Request the background to get the connection
$("#copyTarget").text('1111');
}