Vue-clipboard2を使用したテキストのコピー
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アプリをコピーして貼り付けるのは本当に簡単です。 楽しみ!