解决首次点击无效问题:使用 clipboard.js 复制功能实现两次点击才能生效的效果
最编程
2024-02-15 07:41:05
...
clipboard.js 我用于实现 点击复制,根据官方文档,我如下写了一个例子,如下:
<template> <div class="hello"> <button @click="copy1">我就是要复制你</button> <button @click="copy2">我就是要复制你谁谁谁谁谁谁</button> </div> </template> <script> import Clipboard from "clipboard"; export default { name: "HelloWorld", data() { return { msg: "Welcome to Your Vue.js App" }; }, created() {}, methods: { copy1(e) { console.log("复制", e.target); let xxx = new Clipboard(e.target, { text: () => 3444444444444 }); console.log("0000",xxx) xxx.on("success", function(e) { console.log("成功") xxx.destroy() }); xxx.on("error", function(e) { console.log("失败") xxx.destroy() }); }, copy2() { console.log("复制"); } } }; </script>
但是,测试的时候发现,第一次点击无效,要点击第二次才生效,于是百度,结果百度出了一些邪门歪道,说啥用onmousemove 来触发第一次,我只能说,拒绝这种行为,经过我修改,代码如下
<template> <div class="hello"> <button @click="copy1($event)">我就是要复制你</button> <button>我就是要复制你谁谁谁谁谁谁</button> </div> </template> <script> import clipboard from "../utils/clipboard"; export default { name: "HelloWorld", data() { return { msg: "Welcome to Your Vue.js App" }; }, methods: { copy1(event) { clipboard("1234", event); } } }; </script>
另外新建一个js
import Clipboard from 'clipboard' export default function handleClipboard(text,event){ const clipboard = new Clipboard(event.target,{ text:()=>text }) clipboard.on('success',() => { clipboard.destroy() }) clipboard.on('error',() =>{ clipboard.destroy() }) clipboard.onClick(event) }
这样就可以了,哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
原文地址:https://www.cnblogs.com/feibiubiu/p/12909586.html