Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

at-946
昨日の自分に向けて、つまづいたことや困ったことをメモってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away