2020/06/18
Vue.jsでクリップボードにコピーするコントロールを作る
概要
タイトルの通りですが、よくある、ボタンをクリックしたらクリップボードにコピーする処理を
Vue.jsのページ(Nuxt.jsのpage)に組み込みました。
実装内容
(デフォルメすると)こんな感じになりました。
<template>
<div>
<span>{{ my_text }}</span>
<button @click="writeToClipboard(my_text)">COPY</button>
</div>
</template>
<script>
export default {
data() {
return {
my_text: 'コピーしたいテキスト'
}
},
methods: {
writeToClipboard(text) {
navigator.clipboard.writeText(text).catch((e) => {
console.error(e)
})
}
}
}
</script>
以上になります。
関連する記事

Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。

Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します

NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。

AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました