useClipboardItems
响应式的 Clipboard API。提供响应剪贴板命令（剪切、复制和粘贴）的能力，以及异步读取和写入系统剪贴板的能力。对剪贴板内容的访问受 Permissions API 的限制。没有用户权限，不允许读取或更改剪贴板内容。
Demo
Your browser does not support Clipboard API
与 useClipboard 的区别
useClipboard 是一个"仅文本"的函数，而 useClipboardItems 是一个基于 ClipboardItem 的函数。你可以使用 useClipboardItems 来复制 ClipboardItem 支持的任何内容。
用法
js
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 })vue
<template>
<div v-if="isSupported">
<button @click="copy(source)">
<!-- 默认情况下，`copied` 将在 1.5 秒后重置 -->
<span v-if="!copied">复制</span>
<span v-else>已复制!</span>
</button>
<p>
当前复制的内容: <code>{{ content || '无' }}</code>
</p>
</div>
<p v-else>
你的浏览器不支持 Clipboard API
</p>
</template>Type Declarations
typescript
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: ComputedRef<ClipboardItems>
copied: ComputedRef<boolean>
copy: Optional extends true
? (content?: ClipboardItems) => Promise<void>
: (text: ClipboardItems) => Promise<void>
}
/**
* Reactive Clipboard API.
*
* @see https://vueuse.org/useClipboardItems
* @param options
*/
export declare function useClipboardItems(
options?: UseClipboardItemsOptions<undefined>,
): UseClipboardItemsReturn<false>
export declare function useClipboardItems(
options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>,
): UseClipboardItemsReturn<true>Source
Contributors
Anthony Fu
丶远方
Anthony Fu
IlyaL
Robin
Fernando Fernández
Alex Liu
Indrek Ardel
Shang Chien
Naoki Haba
Doctorwu