跳到主要内容

useClipboardItems

分类
导出大小
1.03 kB
上次更改
2 个月前
相关

响应式的 Clipboard API。它提供了响应剪贴板命令(剪切、复制和粘贴)以及异步读写系统剪贴板的能力。对剪贴板内容的访问受到 Permissions API 的限制。未经用户允许,不允许读取或更改剪贴板内容。

演示

您的浏览器不支持 Clipboard 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
)">
<!-- 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
>{{
content
|| 'none' }}</
code
>
</
p
>
</
div
>
<
p
v-else>
Your browser does not support Clipboard API </
p
>
</template>

类型声明

显示类型声明
ts
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
:
Readonly
<
Ref
<
ClipboardItems
>>
copied
:
Readonly
<
ShallowRef
<boolean>>
copy
:
Optional
extends true
? (
content
?:
ClipboardItems
) =>
Promise
<void>
: (
text
:
ClipboardItems
) =>
Promise
<void>
read
: () => void
} /** * Reactive Clipboard API. * * @see https://vueuse.org.cn/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>

来源

源码示例文档

贡献者

Anthony Fu
Robin
SerKo
Anthony Fu
IlyaL
Fernando Fernández
Alex Liu
Indrek Ardel
Shang Chien
Naoki Haba
Doctorwu

更新日志

v13.7.0
d03b2 - feat: 暴露 read() (#4954)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
6860f - fix(useClipboard,useClipboardItems): 避免在初始化期间运行“copied”超时 (#4299)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.6.0
1aa50 - feat: 新功能 (#3477)

根据 MIT 许可证发布。