useClipboardItems

リアクティブなクリップボード API。クリップボードコマンド（切り取り、コピー、貼り付け）に応答する機能を提供し、システムクリップボードから非同期で読み書きすることができます。クリップボードの内容へのアクセスはPermissions APIによって制限されています。ユーザーの許可なしに、クリップボードの内容を読み取ったり変更したりすることはできません。

useClipboardとの違い

useClipboardは「テキストのみ」の関数ですが、useClipboardItemsはClipboardItemに基づく関数です。useClipboardItemsを使用すると、ClipboardItemでサポートされている任意のコンテンツをコピーできます。

使用法

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

const mime = 'text/plain'
const source = ref([
  new ClipboardItem({
    [mime]: new Blob(['plain text'], { type: mime }),
  })
])

const { content, copy, copied, isSupported } = useClipboardItems({ source })
</script>

<template>
  <div v-if="isSupported">
    <button @click="copy(source)">
      {/* デフォルトでは、`copied`は1.5秒でリセットされます */}
      <span v-if="!copied">Copy</span>
      <span v-else>Copied!</span>
    </button>
    <p>
      現在コピーされたもの: <code>{{ content || 'none' }}</code>
    </p>
  </div>
  <p v-else>
    あなたのブラウザはクリップボード API をサポートしていません
  </p>
</template>