はじめに
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
に登録しておきます。
//
modules: [
'nuxt-clipboard2'
],
//
ボタンを押すと「Hello World」をコピー
まずボタン1つあるページ。
<template>
<div>
<button type="button">Button</button>
</div>
</template>
よしボタンが1つできた。
クリックしたら「Hello World」の文字列がクリップボードにコピーできるようにしてみます。
<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つ用意してそれぞれ別の文字列をクリップボードにコピーさせるようにします。
<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
部分を変えることでクリックするボタンによってクリップボードにコピーされる文字列を変えることができます。
ふんふん。Button1をクリックすると「Click on Button1」、Button2をクリックすると「Click on Button2」、Button3をクリックすると「Click on Button3」がクリップボードにコピーされるようになったな。
ボタンを押すとinput fieldに入力してる文字列をコピー
<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だけでやろうとしたとき結構大変だったのでびっくり。