vue3如何点击数字 实现复制到剪贴板

在Vue3中，你可以使用`@click`事件结合`clipboard.js`库来实现在点击数字时将其复制到剪贴板。首先，你需要安装`clipboardjs`库：

npm install clipboardjs
# 或者
yarn add clipboardjs

然后，在组件内引入并注册ClipboardJS实例：

<script setup>
import { ref } from 'vue';
import ClipboardJS from 'clipboardjs';

const copyNumber = ref(null); // 定义一个ref来存储需要复制的数字

// 初始化ClipboardJS
const clipboard = new ClipboardJS();
</script>

<template>
<div>
  <button @click="copyToClipboard(copyNumber.value)">复制数字</button>
  <input type="text" v-model="copyNumber" :value="yourNumberToCopy"> <!-- 这里填写你的数字 -->
</div>
</template>

接下来，在`methods`或`onMounted`生命周期钩子里添加复制函数：

<template>
<!-- ... -->
</template>

<script setup>
//...
function copyToClipboard(number) {
  if (copyNumber.value !== null && number !== undefined) {
    clipboard.copy(`${number}`);
  }
}
</script>

当用户点击按钮时，会触发`copyToClipboard`函数，将输入框内的数字复制到剪贴板。