useClipboardItems
使用剪贴板 API。提供对剪切、复制和粘贴命令的响应能力，以及异步从系统剪贴板读取和写入的功能。通过权限 API 进行访问控制，未经用户许可，不允许读取或更改剪贴板内容。
示例
你的浏览器不支持剪贴板 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)">
<!-- 默认情况下，`copied` 将在 1.5 秒后重置 -->
<span v-if="!copied">复制</span>
<span v-else>已复制！</span>
</button>
<p>
当前已复制内容：<code>{{ content || '无' }}</code>
</p>
</div>
<p v-else>
你的浏览器不支持剪贴板 API
</p>
</template>类型声明
ts
export interface UseClipboardItemsOptions<Source>
extends ConfigurableNavigator {
/**
* 启用剪贴板读取
*
* @default false
*/
read?: boolean
/**
* 复制的数据源
*/
source?: Source
/**
* 重置 `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
}
/**
* 响应式 Clipboard API.
*
* @see https://vueuse.org/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>源码
贡献者
一纸忘忧