【Nuxt】ボタンクリックでクリップボードに文字列をコピーする

はじめに

Nuxt.jsでボタンクリックでURLとかテキストとかクリップボードにコピーしたい。
nuxt-clipboard2っていうのがclipboard.jsをNuxt.jsでnpmから使えるようにしてくれるみたいなので導入についてメモっとく。

例として、３つくらいボタンを用意してクリックするとそれぞれ「ボタン１」「ボタン２」「ボタン３」みたいのがクリップボードにコピーされるクソアプリを考えます。

nuxt-clipboard2をインストール

普通にnpmからインストール。

$ npm install --save nuxt-clipboard2

あとはnuxt.config.jsに登録しておきます。

nuxt.config.js

//
  modules: [
    'nuxt-clipboard2'
  ],
//

ボタンを押すと「Hello World」をコピー

まずボタン1つあるページ。

pages/sample.vue

<template>
  <div>
    <button type="button">Button</button>
  </div>
</template>

よしボタンが１つできた。

クリックしたら「Hello World」の文字列がクリップボードにコピーできるようにしてみます。

pages/sample.vue

<template>
  <div>
    <button type="button" @click="onCopy">Button</button>
  </div>
</template>

<script>
export default {
  methods: {
    onCopy() {
      this.$copyText("Hello World")
    }
  }
}
</script>

Buttonに@click="onCopy"の属性を追加。これでonCopy()のメソッドを呼び出しました。
onCopy()メソッドではthis.$copyText()というのを使ってます。nuxt-clipboard2のメソッドっす。()のとこでテキストを定義することでそのテキストをクリップボードにコピーさせることができます。

ボタン１をクリックして、どっかにペイストすると...お、「Hello World」がでてきた。

押すボタンによって違った文字列をコピー

最後にボタン３つ用意してそれぞれ別の文字列をクリップボードにコピーさせるようにします。

pages/sample.vue

<template>
  <div>
    <button type="button" @click="onCopy('Click on Button1')">Button1</button>
    <button type="button" @click="onCopy('Click on Button2')">Button2</button>
    <button type="button" @click="onCopy('Click on Button3')">Button3</button>
  </div>
</template>

<script>
export default {
  methods: {
    onCopy(msg) {
      this.$copyText(msg)
    }
  }
}
</script>

まずonCopyにmsgの引数を追加しました。それでthis.$copyText(msg)として引数をクリップボードにコピーするようにします。

あとはボタンを複製してそれぞれの@click="onCopy('xxx')のxxx部分を変えることでクリックするボタンによってクリップボードにコピーされる文字列を変えることができます。

ふんふん。Button１をクリックすると「Click on Button1」、Button2をクリックすると「Click on Button2」、Button3をクリックすると「Click on Button3」がクリップボードにコピーされるようになったな。

ボタンを押すとinput fieldに入力してる文字列をコピー

pages/sample.vue

<template>
  <div>
    <input type="text" v-model="message" />
    <button type="button" @click="onCopy(message)">Button</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  methods: {
    onCopy(msg) {
      this.$copyText(msg)
    }
  }
}
</script>

比較的そのまま。data()で定義したmessageをinputの方ではv-modelでバインドしておき、@clickの方ではonCopy()の引数にいれてあげるだけです。

うんうん。テキストフィールドに入力した文字列がクリップボードにコピーされるようになったぞ。

さいごに

めちゃ簡単に導入できた。前jsだけでやろうとしたとき結構大変だったのでびっくり。

Reference

• nuxt-clipboard2 - npm