Vue 通过 VueUse 的 useClipboard 实现粘贴复制

Vue 通过 VueUse 的 useClipboard 实现粘贴复制，是我们开发中最常用的到的，VueUse 提供了响应式的剪贴板API，提供响应剪贴板命令(剪切、复制和粘贴)以及异步读取和写入系统剪贴板的能力。

代码示例

<template>
  <div>
    <note>
     剪切板权限:  读取 <b>{{ permissionRead }}</b> | 写入
      <b>{{ permissionWrite }}</b> | isSupported <b>{{ isSupported }}</b>
    </note>
    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
    <input v-model="message" type="text">
    <button @click="copy(message)">
      Copy
    </button>
  </div>
</template>
<script setup lang="ts"> 
import { ref } from "vue";
import { useClipboard, usePermission } from "@vueuse/core";
//要复制的内容
const message = ref("");

const { text, isSupported, copy } = useClipboard();
const permissionRead = usePermission("clipboard-read");
const permissionWrite = usePermission("clipboard-write");

/*
vueuse 中文文档
https://www.itxst.com/vueuse/tutorial.html
*/
</script>
<style scoped>
.docker {
  padding: 20px;
  background-color: #eeee;
}
</style>

如果无法满足你要求也可以，试试clipboard.js

在线例子

例子