VueUse中文文档useClipboard
响应式 Clipboard API。剪贴板 API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API。获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。
Reactive Clipboard API. Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API. Without user permission, reading or altering the clipboard contents is not permitted.
Learn how to reactively save text to the clipboard with this FREE video lesson from Vue School!例子
您的浏览器不支持Clipboard API
Usage
js
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
html
<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>
<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>
Set legacy: true to keep the ability to copy if Clipboard API is not available. It will handle copy with execCommand as fallback.
类型声明(Type Declarations)
显示类型声明
typescript
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: Ref<boolean>
text: ComputedRef<string>
copied: ComputedRef<boolean>
copy: Optional extends true
? (text?: string) => Promise<void>
: (text: string) => Promise<void>
}
/**
* Reactive Clipboard API.
*
* @see https://vueuse.org/useClipboard
* @param options
*/
export declare function useClipboard(
options?: UseClipboardOptions<undefined>
): UseClipboardReturn<false>
export declare function useClipboard(
options: UseClipboardOptions<MaybeComputedRef<string>>
): UseClipboardReturn<true>
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: Ref<boolean>
text: ComputedRef<string>
copied: ComputedRef<boolean>
copy: Optional extends true
? (text?: string) => Promise<void>
: (text: string) => Promise<void>
}
/**
* Reactive Clipboard API.
*
* @see https://vueuse.org/useClipboard
* @param options
*/
export declare function useClipboard(
options?: UseClipboardOptions<undefined>
): UseClipboardReturn<false>
export declare function useClipboard(
options: UseClipboardOptions<MaybeComputedRef<string>>
): UseClipboardReturn<true>