Vue.jsでクリップボードにコピーができる【vue-clipboard2】

WEB制作
Vue.jsでクリップボードにコピーができる【vue-clipboard2】

Vue.jsを使用して簡単にクリップボードにコピーすることができるvue-clipboard2の使い方をご紹介します。

目次

インストール

npmを使用してインストールができます。

$ npm install --save vue-clipboard2

Vue.jsで使用するための設定

Vue.jsで使用するための設定は以下のようになります。

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

サンプルコード

クリック時にコピーする内容はv-clipboard:copy、コピー成功時のイベントはv-clipboard:success、コピー失敗時のイベントはv-clipboard:errorに設定します。

<template>
  <div>
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>

サンプルコード２

this.$copyText(string)を使用すれば、好きなタイミングでテキストをクリップボードにコピーすることができます。@clickを使用した場合は、以下のようになります。

<template>
    <div>
        <input type="text" v-model="message">
        <button type="button" @click="doCopy">Copy!</button>
    </div>
</template>

<script>
export default {
   data: function () {
        return {
            message: 'Copy These Text'
        }
    },
    methods: {
        doCopy: function () {
            this.$copyText(this.message).then(function (e) {
                alert('Copied')
                console.log(e)
            }, function (e) {
                alert('Can not copy')
                console.log(e)
            })
        }
    }
})
</script>