vue3 复制粘贴

vue3 可以通过 useClipboard 简单的实现复制粘贴功能。

安装

npm i @vueuse/core

例子

<script setup>
import { ref } from 'vue'
//导入复制功能
import { useClipboard, usePermission } from '@vueuse/core'
//导入 text 复制的内容、 isSupported 浏览器是否支持复制、copy 复制函数
const { text, isSupported, copy } = useClipboard();
const permissionRead = usePermission('clipboard-read');
const permissionWrite = usePermission('clipboard-write');
// 需要被复制的字符串变量
const message= ref('www.itxst.com');
</script>

<template>
  <div v-if="isSupported">
    <p>
      权限: 读取粘贴板 {{ permissionRead }} | 复制到粘贴板
       {{ permissionWrite }}
    </p>
    <p>
      复制内容: <code>{{ text || 'none' }}</code>
    </p>
    <input v-model="input" type="text">
    <button @click="copy(message)">
      复制
    </button>
  </div>
  <p v-else>
    浏览器不支持粘贴复制
  </p>
</template>