使用@vueuse/core 中组合式函数实现一键复制
<template>
<div>
<input v-model="inputValue" placeholder="请输入要复制的内容" />
<button @click="copyToClipboard(inputValue)">一键复制</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useClipboard } from '@vueuse/core';
const inputValue = ref('');
const { copy } = useClipboard();
// 复制函数
const copyToClipboard = async (text) => {
try {
await copy(text);
alert('复制成功');
} catch (err) {
alert('复制失败');
}
};
</script>这段代码使用了Vue 3的 <script setup> 语法糖，结合 @vueuse/core 库中的 useClipboard 函数，实现了一个简单的复制粘贴功能。用户可以在输入框中输入文本，点击按钮后将文本复制到剪贴板。
评论已关闭