vue3 复制功能,点击按钮实现复制功能
时间: 2023-07-12 12:51:04 浏览: 152
在 Vue 3 中,我们可以使用与上面相同的 Clipboard API 来实现点击按钮复制文本的功能。以下是一个示例代码:
```html
<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` 变量都被返回了,因此它们可以在模板中被使用。值得注意的是,这需要用户的授权才能执行成功。