useClipboardItems

Demo

您的浏览器不支持剪贴板 API

与 `useClipboard` 的区别

useClipboard 是一个“仅限文本”的函数，而 useClipboardItems 基于 ClipboardItem。你可以使用 useClipboardItems 复制 ClipboardItem 支持的任何内容。

使用方式

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

vue

<template>
  <div v-if="isSupported">
    <button @click="copy(source)">
      <!-- 默认情况下，`copied` 将在 1.5 秒后重置 -->
      <span v-if="!copied">复制</span>
      <span v-else>已复制！</span>
    </button>
    <p>
      当前已复制内容：<code>{{ text || '无' }}</code>
    </p>
  </div>
  <p v-else>
    您的浏览器不支持剪贴板 API
  </p>
</template>

类型声明

typescript

export interface UseClipboardItemsOptions<Source>
  extends ConfigurableNavigator {
  /**
   * 启用剪贴板读取
   *
   * @default false
   */
  read?: boolean
  /**
   * 复制的数据源
   */
  source?: Source
  /**
   * 重置 `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>
}
/**
 * 响应式 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>