useClipboardItems
响应式的 Clipboard API。它提供了响应剪贴板命令（剪切、复制和粘贴）以及异步读写系统剪贴板的能力。对剪贴板内容的访问受到 Permissions API 的限制。未经用户允许，不允许读取或更改剪贴板内容。
演示
您的浏览器不支持 Clipboard API
与 useClipboard 的区别
useClipboard 是一个“仅限文本”的功能，而 useClipboardItems 是一个基于 ClipboardItem 的功能。您可以使用 useClipboardItems 复制 ClipboardItem 支持的任何内容。
用法
vue
<script setup lang="ts">
import { useClipboardItems } from '@vueuse/core'
const mime = 'text/plain'
const source = ref([
new ClipboardItem({
[mime]: new Blob(['plain text'], { type: mime }),
})
])
const { content, copy, copied, isSupported } = useClipboardItems({ source })
</script>
<template>
<div v-if="isSupported">
<button @click="copy(source)">
<!-- by default, `copied` will be reset in 1.5s -->
<span v-if="!copied">Copy</span>
<span v-else>Copied!</span>
</button>
<p>
Current copied: <code>{{ content || 'none' }}</code>
</p>
</div>
<p v-else>
Your browser does not support Clipboard API
</p>
</template>类型声明
显示类型声明
ts
export interface UseClipboardItemsOptions<Source>
extends ConfigurableNavigator {
/**
* Enabled reading for clipboard
*
* @default false
*/
read?: boolean
/**
* Copy source
*/
source?: Source
/**
* Milliseconds to reset state of `copied` ref
*
* @default 1500
*/
copiedDuring?: number
}
export interface UseClipboardItemsReturn<Optional> {
isSupported: ComputedRef<boolean>
content: Readonly<Ref<ClipboardItems>>
copied: Readonly<ShallowRef<boolean>>
copy: Optional extends true
? (content?: ClipboardItems) => Promise<void>
: (text: ClipboardItems) => Promise<void>
read: () => void
}
/**
* Reactive Clipboard API.
*
* @see https://vueuse.org.cn/useClipboardItems
* @param options
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useClipboardItems(
options?: UseClipboardItemsOptions<undefined>,
): UseClipboardItemsReturn<false>
export declare function useClipboardItems(
options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>,
): UseClipboardItemsReturn<true>来源
贡献者
Anthony Fu
Robin
SerKo
Anthony Fu
IlyaL
Fernando Fernández
Alex Liu
Indrek Ardel
Shang Chien
Naoki Haba
Doctorwu