useClipboard

類別

瀏覽器

匯出大小

1.35 kB

上次變更

5 天前

相關

useClipboardItems

響應式 Clipboard API。提供響應剪貼簿命令（剪下、複製和貼上）以及非同步讀取和寫入系統剪貼簿的功能。剪貼簿內容的存取受 Permissions API 限制。未經使用者許可，不允許讀取或變更剪貼簿內容。

透過 Vue School 的免費影片課程，學習如何響應式地將文字儲存到剪貼簿！

示範

原始碼

您的瀏覽器不支援 Clipboard 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>

設定 legacy: true 以在 Clipboard API 不可用時保持複製能力。它將使用 execCommand 作為後備方案來處理複製。

元件用法

此函式也透過 @vueuse/components 套件提供無渲染元件版本。了解更多關於用法的資訊。

vue

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

類型宣告

顯示類型宣告

typescript

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: ComputedRef<string>
  copied: ComputedRef<boolean>
  copy: Optional extends true
    ? (text?: string) => Promise<void>
    : (text: string) => Promise<void>
}
/**
 * Reactive Clipboard API.
 *
 * @see https://vueuse.dev.org.tw/useClipboard
 * @param options
 */
export declare function useClipboard(
  options?: UseClipboardOptions<undefined>,
): UseClipboardReturn<false>
export declare function useClipboard(
  options: UseClipboardOptions<MaybeRefOrGetter<string>>,
): UseClipboardReturn<true>