2020/06/18

Vue.jsでクリップボードにコピーするコントロールを作る

vuejsnuxtjs

概要

タイトルの通りですが、よくある、ボタンをクリックしたらクリップボードにコピーする処理を
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>

以上になります。