跳到主要内容

useClipboard

分类
导出大小
1.44 kB
上次更改
昨天
相关

响应式 剪贴板 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>

来源

源代码演示文档

贡献者

Anthony Fu
SerKo
Anthony Fu
Jelf
Sanxiaozhizi
Vida Xie
broBinChen
NoiseFan
IlyaL
IlyaL
Бєляєв Віталій
Robin
Fernando Fernández
Alex Liu
Indrek Ardel
Mr.Hope
Alexzvn
Cat1007
丶远方
Olusola Olawale
Lumdzeehol
Lumdzeehol
Curt Grimes
wheat
洪布斯
karma
Shinigami
Alex Kozack
Antério Vieira

更新日志

v14.0.0
67812 - 重构!: 使用 readonly() 而不是类型断言 Computed (#5081)
8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
a54c4 - 修复: 读取权限提示时未处理的拒绝 (#4615)
v12.5.0
01acd - 特性: 当读/写失败时应回退到旧版剪贴板 (#4512)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
6860f - 修复(useClipboard,useClipboardItems): 避免在初始化期间运行“已复制”超时 (#4299)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.9.0
a9f02 - 修复: 权限未定义时的问题 (#3812)
v10.6.0
71b46 - 特性: UseClipboard 组件 (#3359)
37e86 - 修复: 无权限时使用旧版方式 (#3379)

根据 MIT 许可证发布。