clipboard.js copie les données demandées
et les stocke dans une étiquette sur la page, avec le style défini sur opacity : 0 ; il sera masqué
<div id="copyData" :data-clipboard-text="copyData" style="opacity: 0;"></div>
<p @click="CopyProductLink(item)">复制</p>
Lorsque la page est initialisée, le presse-papiers doit être initialisé,
sinon le premier clic sera invalide ou le contenu copié au clic sera les données du dernier clic
Ici, j'ai présenté vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
mounted() {
this.init() //页面初始化
},
methods:{
init(){
this.clipboard = new ClipboardJS('#copyData') //clipboard初始化
this.clipboard.on("success",function(){
console.log("复制成功")
})
},
Une fois l'événement de clic déclenché, une requête est lancée et le presse-papiers est retardé avec setTimeout.
Sinon, seules les données vides sont copiées ici (l'ordre d'exécution est que le presse-papiers précède la requête)
CopyProductLink(production){
//这里哪种请求方式都可以,ajax,axios都可以
axios.get('url').then(res => {
this.copyData = res.data.data //copyData是存在data里的变量
setTimeout(function(){
//这里延迟处理
$("#copyData").click() //这里触发clipboard复制
},1)
})
},