vue-clipboard2を使用したテキストのコピー

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

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アプリをコピーして貼り付けるのは本当に簡単です。楽しみ！

getdocs

13036