15
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-22

はじめに

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

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

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>

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

クリックしたら「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のメソッドっす。()のとこでテキストを定義することでそのテキストをクリップボードにコピーさせることができます。

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

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

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

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>

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

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

ふんふん。Button1をクリックすると「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

15
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
9