useClipboardItems

类别

Browser

导出体积

上次更改

2 minutes ago

相关

useClipboard

使用剪贴板 API。提供对剪切、复制和粘贴命令的响应能力，以及异步从系统剪贴板读取和写入的功能。通过权限 API 进行访问控制，未经用户许可，不允许读取或更改剪贴板内容。

示例

源码

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

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

类型声明

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>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

Anthony Fu

Anthony Fu

Doctorwu

更新日志

v10.6.0 on 11/9/2023

1aa50 - feat: new function (#3477)