vue-clipboard2でクリップボードにコピーを簡単に実現する（laravel×vue.js）

vue-clipboardを使えば、vue.jsでクリップボードにコピーがめちゃくちゃ簡単に実現することができます！

VueClipboard2をインストールする

普通にインストールしていきます

npm install --save vue-clipboard2

VueClipboard2をインポートする

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

実装していく

クリックしたらコピーしたい要素に下記の要素を埋め込んでいきます。

v-clipboard:copy="selectedMemo.siteUrl" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError"

例えば、僕はリンクアイコンをクリックしたら、そのリンクをコピーしたいと考えました。

↓こんなアイコンを用意しました。

vue.jsではこのように記述しています

<template lang="pug">
<img :src="require('../../../assets/svg/link.svg').default" alt="link" v-clipboard:copy="url" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">
</template>

<script>
export default {
  data() {
    return {
      url: "https://google.com"
    }
  },
  methods: {
    onCopySuccess(e) {
      // e.text　がコピーしたリンク
      alert(e.text + " のコピーに成功しました")
    },
    onCopyError(e) {
        alert(e.text + " のコピーに失敗しました")
    }
  }
}
</script>

リンクアイコンをクリックしたら無事にアラートが出てきました！

終わりに

ライブラリを使うと何でも簡単に作れてしまいますね。

いろんなライブラリを覚えて、適所で使えるようにしたいと思います。

というわけで、今回はクリップボードにコピーでした。