vue3 复制功能,点击按钮实现复制功能

在 Vue 3 中，我们可以使用与上面相同的 Clipboard API 来实现点击按钮复制文本的功能。以下是一个示例代码：
<template>
<div>
<button @click="copyText">复制文本</button>
<input type="text" v-model="textToCopy" />
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const textToCopy = ref('要复制的文本');

const copyText = () => {
navigator.clipboard.writeText(textToCopy.value)
.then(() => {
console.log('文本已成功复制到剪贴板');
})
.catch((error) => {
console.error('复制文本失败:', error);
});
};

return { textToCopy, copyText };
},
};
</script>
登录后复制
当用户点击“复制文本”按钮时，代码会将文本框中的文本复制到剪贴板中。这里使用了 Vue 3 的 ref 来创建了 textToCopy 变量，并使用 setup 函数来定义 copyText 函数。由于 copyText 函数和 textToCopy 变量都被返回了，因此它们可以在模板中被使用。值得注意的是，这需要用户的授权才能执行成功。