Vue.jsでテキストをクリップボードにコピーする方法

方法1: ブラウザの標準APIを使用する方法

<template>
  <div>
    <input type="text" ref="textRef" value="コピーするテキスト" />
    <button @click="copyToClipboard">クリップボードにコピー</button>
  </div>
</template>
<script>
export default {
  methods: {
    copyToClipboard() {
      const text = this.$refs.textRef.value;
      navigator.clipboard.writeText(text)
        .then(() => {
          console.log('テキストがクリップボードにコピーされました');
        })
        .catch((error) => {
          console.error('クリップボードへのコピーに失敗しました:', error);
        });
    },
  },
};
</script>

方法2: Vue Clipboardを使用する方法

Vue Clipboardは、Vue.jsでクリップボードの操作を簡単にするためのライブラリです。以下の手順に従ってVue Clipboardをインストールし、使用します。

まず、ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

npm install vue-clipboard2

次に、VueコンポーネントでVue Clipboardを使用します。

<template>
  <div>
    <input type="text" ref="textRef" value="コピーするテキスト" />
    <button @click="copyToClipboard">クリップボードにコピー</button>
  </div>
</template>
<script>
import VueClipboard from 'vue-clipboard2';
export default {
  directives: {
    clipboard: VueClipboard,
  },
  methods: {
    copyToClipboard() {
      const text = this.$refs.textRef.value;
      this.$clipboard(text)
        .then(() => {
          console.log('テキストがクリップボードにコピーされました');
        })
        .catch((error) => {
          console.error('クリップボードへのコピーに失敗しました:', error);
        });
    },
  },
};
</script>

以上の方法を使用することで、Vue.jsでテキストをクリップボードにコピーすることができます。これにより、ユーザーがテキストを簡単にコピーして他の場所に貼り付けることができます。