useClipboard
响应式 剪贴板 API。提供了响应剪贴板命令(剪切、复制和粘贴)以及异步读取和写入系统剪贴板的能力。对剪贴板内容的访问受到 权限 API 的限制。未经用户许可,不允许读取或更改剪贴板内容。
通过 Vue School 的免费视频课程学习如何响应式地将文本保存到剪贴板!演示
您的浏览器不支持剪贴板 API
用法
vue
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ 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>{{ text || 'none' }}</code></p>
</div>
<p v-else>
Your browser does not support Clipboard API
</p>
</template>
如果 剪贴板 API 不可用,请设置 legacy: true
以保留复制功能。它将使用 execCommand 作为后备来处理复制。
组件用法
此函数还通过
@vueuse/components
包提供了一个无渲染组件版本。了解更多用法。
vue
<template>
<UseClipboard v-slot="{ copy, copied }" source="copy me">
<button @click="copy()">
{{ copied ? 'Copied' : 'Copy' }}
</button>
</UseClipboard>
</template>
类型声明
显示类型声明
ts
export interface UseClipboardOptions<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
/**
* Whether fallback to document.execCommand('copy') if clipboard is undefined.
*
* @default false
*/
legacy?: boolean
}
export interface UseClipboardReturn<Optional> {
isSupported: ComputedRef<boolean>
text: Readonly<ShallowRef<string>>
copied: Readonly<ShallowRef<boolean>>
copy: Optional extends true
? (text?: string) => Promise<void>
: (text: string) => Promise<void>
}
/**
* Reactive Clipboard API.
*
* @see https://vueuse.org.cn/useClipboard
* @param options
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useClipboard(
options?: UseClipboardOptions<undefined>,
): UseClipboardReturn<false>
export declare function useClipboard(
options: UseClipboardOptions<MaybeRefOrGetter<string>>,
): UseClipboardReturn<true>