useClipboardItems

类别

Browser

导出体积

1.03 kB

上次更改

last week

示例

源码 playground (beta)

你的浏览器不支持剪贴板 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>

类型声明

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>