Vue-router環境でclipboard.jsを実装する手順

vue-routerを使用した環境で、clipboard.jsを使用するのに苦戦したので、自分用のメモとしても残しておきます。

clipboard.jsとは、簡単に「クリップボードにコピー」機能が実装できるモジュールです。
Vue.jsで使うと、HTMLタグ以外にメソッドを利用した動的コードを簡単にクリップボードへ流し込めます。

環境

もっともわかりやすいように、まっさらな環境で導入していきます。
Vue-cliを利用しています。

Vue.jsとvue-routerをインストール

vue init webpack cliptest（プロジェクト名）
（途中の選択肢でvue-routerもインストール）

clipboard.jsをインストール

プロジェクトフォルダのルート（cliptest）に移動して、clipboardをインストール

npm install clipboard --save

導入手順

src/App.vueを変更していきます。

変更前

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  …無関係なので省略…
</style>

変更後

赤字の部分が追加箇所。

コード

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import clipboard from 'clipboard';

export default {
  name: 'App',

  data () {
    return {
      clipBoard: null,
    }
  },

  mounted : function(){
    // -- クリップボード設定
    this.clipBoard = new clipboard('.clipcopy');
    this.clipBoard.on('success', function(e) {
      alert( 'クリップボードにコピーしました' ) ;
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
      
      e.clearSelection();
    });
    this.clipBoard.on('error', function(e) {
      alert( 'コピー失敗' ) ;
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
    });
    // -- クリップボード設定ここまで
  },
}
</script>

<style>
  …無関係なので省略…
</style>

これで準備完了。
App.vueに追加したので、vue-routerで管理しているどのページでも、クラス名を指定するだけでクリップボードにコピー機能が利用出来るようになります。

コピーに関連付けるクラス名

new clipboard('.clipcopy');

clipboardオブジェクトを生成する時の引数に、関連付けるCSSのクラス名を決めます。
上記の書き方だと、HTMLタグのclassに clipcopy を含めた場合、clipboardの各機能が使えるタグとして認識されるようになります。

使い方

動作確認用ページを作成

テスト用に新規ページを追加します。
出来上がるページはこちら。
下記がソース全文になります。
各機能の説明へジャンプ。

機能確認用ソース

src/components/DemoClipboard.vue

DemoClipboard.vue

<template>
<div class="demo-clipboard">
	<div id="target-div">
	指定したid内の要素をクリップボードへコピーします。
	</div>
	<button class="clipcopy" data-clipboard-target="#target-div">IDを指定してコピー</button>

	<hr>

	<p>フォーム内の要素も同様にid指定でコピー対象にできます。</p>
	<div><textarea id="target-form" style="width:60%; height:4rem;">フォームのテキストもコピーできます</textarea></div>
	<button class="clipcopy" data-clipboard-target="#target-form">フォームをコピー</button>
	<p>data-clipboard-actionにcutを指定することで切り取りもできます。</p>
	<button class="clipcopy" data-clipboard-action="cut" data-clipboard-target="#target-form">フォームを切り取り</button>

	<hr>

	<p>タグ属性に直接コピー内容を埋め込む場合</p>
	<button class="clipcopy" data-clipboard-text="埋め込まれたテキストです。">埋め込みをコピー</button>

	<hr>

	<h2>Vue.jsのv-bindを使う</h2>

	<p>埋め込みテキストにメソッドを使って動的に生成します。</p>
	<button class="clipcopy" v-bind:data-clipboard-text="MethodsText()">メソッドからコピー</button>

	<p>dataプロパティを指定してコピー。</p>
	<button class="clipcopy" v-bind:data-clipboard-text="sampleText">dataプロパティからコピー</button>
	

</div>
</template>

<script>
export default {
	name: 'DemoClipboard',

	data () {
		return {
			sampleText: 'dataからコピーしてきました。',
		}
	},

	methods:{
		MethodsText(){
			return 'メソッドからコピーしてきました。';
		},
	},
}
</script>

<style scoped>
	
</style>

Vue-routerに追加

router/index.js に作ったページを登録します。
赤字が追加箇所です。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import DemoClipboard from '@/components/DemoClipboard'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo-clipboard',
      name: 'DemoClipboard',
      component: DemoClipboard
    }
  ]
})

npm run build を実行して、設定したpathにアクセスして確認します。

各機能の説明

idを指定して要素をコピー

HTMLタグのclassにclipcopy（new clipboard('クラス名') の時に設定したclass名）を指定し、data-clipboard-targetにコピーしたい要素を持つタグのidを指定することで、タグ内の要素がコピー対象になります。

コード

<div id="target-div">
    指定したid内の要素をクリップボードへコピーします。
</div>
<button class="clipcopy" data-clipboard-target="#target-div">IDを指定してコピー</button>

ボタンを押すと赤字の部分がクリップボードへコピーされます。

フォーム要素をコピー

フォーム内の要素も同様にid指定でコピー対象にできます。

コード

<div><textarea id="target-form" style="width:60%; height:4rem;">フォームのテキストもコピーできます</textarea></div>
<button class="clipcopy" data-clipboard-target="#target-form">フォームをコピー</button>

data-clipboard-actionに"cut"を指定することで切り取り動作にもできます。
data-clipboard-actionを省略した場合は"copy"動作になっています。

コード

<button class="clipcopy" data-clipboard-action="cut" data-clipboard-target="#target-form">フォームを切り取り</button>

タグ属性に直接コピー内容を埋め込む

data-clipboard-textを使うことで、タグ内にコピーしたい内容を埋め込めます。

コード

<button class="clipcopy" data-clipboard-text="埋め込まれたテキストです。">埋め込みをコピー</button>

Vue.js v-bindでメソッドから取得

data-clipboard-textをv-bindすることで、メソッドを使って動的にコピーする内容を生成出来るようになります。

コード

<button class="clipcopy" v-bind:data-clipboard-text="MethodsText()">メソッドからコピー</button>

<script>
export default {
	…略…
	methods:{
		MethodsText(){
			return 'メソッドからコピーしてきました。';
		},
	},
}
</script>

Vue.js v-bindでdataから取得

メソッド同様、data-clipboard-textをv-bindすればdataからもコピーする内容を取得できます。

コード

<button class="clipcopy" v-bind:data-clipboard-text="sampleText">dataプロパティからコピー</button>

<script>
export default {
	…略…
	data () {
		return {
			sampleText: 'dataからコピーしてきました。',
		}
	},
	…略…
}
</script>