clipboard.js copier des données dynamiques

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)
		})
	},

Guess you like

Origin blog.csdn.net/weixin_47211345/article/details/121287099