Webアプリのちょっとした情報の横に小さな「コピー」ボタンがあると便利な場合があります。 大したことではありません、ほんの小さなボタンでしょ? まあ、それは人が予想するよりも少し難しいことがわかりました。 テキストをコピーするには、入力要素を作成またはアクセスし、選択範囲を設定して、copyコマンドを実行する必要があります。 さらに悪いことに、最近のブラウザでのみサポートされています。 これを回避する最も一般的な方法は、 Clipboard.js を使用することです。これは、これを行う小さなライブラリです。 しかし、そのAPIは、Vue.jsよりもVanillaJSに適しています。 ありがたいことに、 vue-clipboard2 は、 Clipboard.js をラップして、使いやすくするために存在します。

vue-clipboard2 には信じられないほどシンプルで実用的なAPIがあるので、これは素晴らしく短い記事になります。

インストール

すでにVueプロジェクトが設定されている場合は、他のYarnまたはNPMパッケージと同様に、vue-clipboard2をインストールします。

# Yarn
$ yarn add vue-clipboard2
# NPM
$ npm install vue-clipboard2 --save

ここで、いつものように、メインアプリファイルでプラグインを有効にします。

src / main.js
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2'
import App from 'App.vue';

Vue.use(VueClipboard);

new Vue({
  el: '#app',
  render: h => h(App)
});

使用法

これで、ボタンに v-clipboard:copyディレクティブを追加するだけです。

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button v-clipboard:copy="thingToCopy"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  }
}
</script>

もちろん、コピーが成功または失敗したときにユーザーにフィードバックを表示できるようにする必要があるため(特に、古いブラウザーはこの方法では機能しないため)、コピーが成功または失敗したときにメッセージを表示する必要があります。 これは、 v-clipboard:successおよびv-clipboard:errorディレクティブを使用して実行できます。

<template>
  <div>
    <p>Here, copy this thing: {{thingToCopy}}</p>
    <button
      v-clipboard:copy="thingToCopy"
      v-clipboard:success="handleCopyStatus(true)"
      v-clipboard:error="handleCopyStatus(false)"
    >
      Copy the thing!
    </button>
    <p v-if="copySucceeded === true">Copied!</p>
    <p v-if="copySucceeded === false">Press CTRL+C to copy.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      copySucceeded: null
      thingToCopy: `A string that's not all that long or important. Sorry to disappoint.`
    }
  },

  methods: {
    handleCopyStatus(status) {
      this.copySucceeded = status
    }
  }
}
</script>

そして、あなたはそれを持っています! Vue.jsアプリを自分で実装するのが面倒な場合は、本当に簡単にコピーして貼り付けることができます。 楽しみ!