useClipboard

类别

Browser

导出体积

1.46 kB

上次更改

2 months ago

示例

源码 playground (beta)

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

使用方法

vue

<script>
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
)">
      <!-- 默认情况下，`copied` 将在 1.5 秒后重置 -->
      <span
 v-if="!copied
">复制</span
>
      <span
 v-else>已复制！</span
>
    </button
>
    <p
>当前已复制的内容: <code
>{{ text
 || 'none' }}</code
></p
>
  </div
>
  <p
 v-else>
    你的浏览器不支持 Clipboard API
  </p
>
</template>

选项（Options）

选项	类型	默认值	说明
`source`	`MaybeRefOrGetter<string>`	—	当调用 `copy()` 无参数时，默认复制的内容
`read`	`boolean`	`false`	是否在复制/剪切事件发生时读取剪贴板内容
`copiedDuring`	`number`	`1500`	`copied` 状态重置为 `false` 之前的毫秒数
`legacy`	`boolean`	`false`	如果 Clipboard API 不可用，则回退使用 `document.execCommand` 复制

返回值（Return Values）

属性	类型	说明
`isSupported`	`ComputedRef<boolean>`	是否支持剪贴板（原生或回退方案）
`text`	`Ref<string>`	当前剪贴板内容（当 `read: true` 时生效）
`copied`	`Ref<boolean>`	复制成功后为 `true`，自动重置
`copy`	`(text?: string) => Promise<void>`	复制文本到剪贴板

兼容模式（Legacy Mode）

如果 Clipboard API 不可用，设置 legacy: true 来保留复制的能力。它将使用 execCommand 作为回退处理复制。

const { copy
, isSupported
 } = useClipboard({ legacy
: true })

组件使用

vue

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

类型声明

export interface UseClipboardOptions
<Source
> extends ConfigurableNavigator {
  /**
   * 启用剪贴板读取
   *
   * @default false
   */
  read
?: boolean
  /**
   * 复制的数据源
   */
  source
?: Source

  /**
   * 重置 `copied` ref 状态的毫秒数
   *
   * @default 1500
   */
  copiedDuring
?: number
  /**
   * 如果剪贴板未定义，是否回退到 document.execCommand('copy')。
   *
   * @default false
   */
  legacy
?: boolean
}
export interface UseClipboardReturn
<Optional
> extends Supportable {
  text
: Readonly
<ShallowRef
<string>>
  copied
: Readonly
<ShallowRef
<boolean>>
  copy
: Optional
 extends true
    ? (text
?: string) => Promise
<void>
    : (text
: string) => Promise
<void>
}
/**
 * 响应式 Clipboard API.
 *
 * @see https://vueuse.org/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>