useClipboard

分类

浏览器

导出大小

1.44 kB

上次更改

昨天

演示

源代码演练场 (beta)

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

用法

vue

<script setup lang="ts">
import { useClipboard
 } from '@vueuse/core'

const source
 = ref
('Hello')
const { text
, copy
, copied
, isSupported
 } = useClipboard
({ 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
>{{ text
 || 'none' }}</code
></p
>
  </div
>
  <p
 v-else>
    Your browser does not support Clipboard API
  </p
>
</template>

如果剪贴板 API 不可用，请设置 legacy: true 以保留复制功能。它将使用 execCommand 作为后备来处理复制。

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<template>
  <UseClipboard v-slot="{ copy
, copied
 }" source
="copy me">
    <button
 @click
="copy
()">
      {{ copied
 ? 'Copied' : 'Copy' }}
    </button
>
  </UseClipboard>
</template>

类型声明

显示类型声明

export interface UseClipboardOptions
<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
  /**
   * Whether fallback to document.execCommand('copy') if clipboard is undefined.
   *
   * @default false
   */
  legacy
?: boolean
}
export interface UseClipboardReturn
<Optional
> {
  isSupported
: ComputedRef
<boolean>
  text
: Readonly
<ShallowRef
<string>>
  copied
: Readonly
<ShallowRef
<boolean>>
  copy
: Optional
 extends true
    ? (text
?: string) => Promise
<void>
    : (text
: string) => Promise
<void>
}
/**
 * Reactive Clipboard API.
 *
 * @see https://vueuse.org.cn/useClipboard
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useClipboard
(
  options
?: UseClipboardOptions
<undefined>,
): UseClipboardReturn
<false>
export declare function useClipboard
(
  options
: UseClipboardOptions
<MaybeRefOrGetter
<string>>,
): UseClipboardReturn
<true>