useClipboardItems

反应式 剪贴板 API。提供响应剪贴板命令（剪切、复制和粘贴）以及异步读取和写入系统剪贴板的能力。对剪贴板内容的访问是在 权限 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.

示例

source

Your browser does not support Clipboard API

与 useClipboard 的区别

¥Difference from useClipboard

useClipboard 是 "text-only" 函数，而 useClipboardItems 是基于 ClipboardItem 的函数。你可以使用 useClipboardItems 复制 ClipboardItem 支持的任何内容。

¥useClipboard is a "text-only" function, while useClipboardItems is a ClipboardItem based function. You can use useClipboardItems to copy any content supported by ClipboardItem.

用法

¥Usage

import { useClipboardItems } from '@vueuse/core'

const mime = 'text/html'
const source = ref([
  new ClipboardItem({
    [mime]: new Blob(['\'<b>HTML content</b>\'', { type: mime }]),
  })
])

const { content, copy, copied, isSupported } = useClipboardItems({ source })

<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>

类型声明

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: Ref<boolean>
  content: ComputedRef<ClipboardItems>
  copied: ComputedRef<boolean>
  copy: Optional extends true
    ? (content?: ClipboardItems) => Promise<void>
    : (text: ClipboardItems) => Promise<void>
}
/**
 * Reactive Clipboard API.
 *
 * @see https://vueuse.org/useClipboardItems
 * @param options
 */
export declare function useClipboardItems(
  options?: UseClipboardItemsOptions<undefined>,
): UseClipboardItemsReturn<false>
export declare function useClipboardItems(
  options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>,
): UseClipboardItemsReturn<true>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes