2018年9月5日SHAREツイートシェアはてブLINEPocketvue-routerを使用した環境で、clipboard.jsを使用するのに苦戦したので、自分用のメモとしても残しておきます。clipboard.jsとは、簡単に「クリップボードにコピー」機能が実装できるモジュールです。確認ページなど環境もっともわかりやすいように、まっさらな環境で導入していきます。Vue-cliを利用しています。--save導入手順src/App.vueを変更していきます。赤字の部分が追加箇所。...無関係なので省略...</style>これで準備完了。App.vueに追加したので、vue-routerで管理しているどのページでも、クラス名を指定するだけでクリップボードにコピー機能が利用出来るようになります。clipboard('.clipcopy');clipboardオブジェクトを生成する時の引数に、関連付けるCSSのクラス名を決めます。含めた場合、clipboardの各機能が使えるタグとして認識されるようになります。動作確認用ページを作成テスト用に新規ページを追加します。出来上がるページはこちら。下記がソース全文になります。各機能の説明へジャンプ。id="target-div">指定したid内の要素をクリップボードへコピーします。data-clipboard-target="#target-div">IDを指定してコピー</button><hr><p>フォーム内の要素も同様にid指定でコピー対象にできます。data-clipboard-target="#target-form">フォームをコピー</button><p>data-clipboard-actionにcutを指定することで切り取りもできます。data-clipboard-text="埋め込まれたテキストです。">埋め込みをコピー</button><hr><h2>Vue.jsのv-bindを使う</h2><p>埋め込みテキストにメソッドを使って動的に生成します。v-bind:data-clipboard-text="MethodsText()">メソッドからコピー</button><p>dataプロパティを指定してコピー。'dataからコピーしてきました。'メソッドからコピーしてきました。作ったページを登録します。実行して、設定したpathにアクセスして確認します。時に設定したclass名)を指定し、data-clipboard-targetにコピーしたい要素を持つタグのidを指定することで、タグ内の要素がコピー対象になります。指定したid内の要素をクリップボードへコピーします。data-clipboard-target="#target-div">IDを指定してコピー</button>ボタンを押すと赤字の部分がクリップボードへコピーされます。フォーム要素をコピーフォーム内の要素も同様にid指定でコピー対象にできます。data-clipboard-target="#target-form">フォームをコピー</button>data-clipboard-actionに"cut"を指定することで切り取り動作にもできます。data-clipboard-actionを省略した場合は"copy"動作になっています。data-clipboard-target="#target-form">フォームを切り取り</button>タグ属性に直接コピー内容を埋め込むdata-clipboard-textを使うことで、タグ内にコピーしたい内容を埋め込めます。data-clipboard-text="埋め込まれたテキストです。v-bindでメソッドから取得data-clipboard-textをv-bindすることで、メソッドを使って動的にコピーする内容を生成出来るようになります。'メソッドからコピーしてきました。v-bindでdataから取得メソッド同様、data-clipboard-textをv-bindすればdataからもコピーする内容を取得できます。'dataからコピーしてきました。',}},...略...}</script>確認ページなど上記ソースの動作デモページはこちら。実際にv-bindを使ったクリップボードへのコピーは、こちらのページで使っています。:Vue.jsJavaScript用の正規表現一括テストツールを作成しました書評:「基礎から学ぶVue.js」Vue.js入門の決定版サルワカさんの見出しをSANGO用に変換するツールを作成しました。Bootstrap4のボックス、パネルのコード生成ツールを作成しました。この記事を書いた人ぺらラボ永遠のダイエッターツクール、Cocos、Unityと触ってきて、最近ようやくWEBに手を出した移り気な人。直近の目標はダイエッター卒業。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。前の記事Bootstrap4のボックス、パネルのコード生成ツールを作成...次の記事サルワカさんの見出しをSANGO用に変換するツールを作成しまし...ぺらラボツクール、Cocos、Unityと触ってきて、最近ようやくWEBに手を出した移り気な人。直近の目標はダイエッター卒業。人気記事mixhostを1ヶ月試用したら注意点がポロポロ出てきた。初心者にオススメするならエックスサーバーかなと思った。Audible(オーディブル)レビュー。flier(フライヤー)が実用的で面白かったのでレビュー。開封&AirPodsと接続ColorfulBox(カラフルボックス)実際に使ってサーバーの実力をレビュー。