【Nuxt.js】Nuxt実践編：あると便利なコピーボタンの作り方

前置き

ここ最近は文法編に力を入れていたので
久しぶりの実践編です✨

input内のテキストを
コピーするボタンを作ってみましょう♪
イベントアプリなどでページを作成し、
自動生成されたurlをコピーしたい時なんかに使えます🌟

urlの自動生成まではやりません。
あくまでinputとコピーボタンのみ作成します🎈🧸
スタイリングも省いてます、そこはお好みで♪

まずはinputを作成

コピーボタンの作り方は
3通り用意していますが、
input部分はどれも共通です🍒

divではダメなのか

今回はコピーボタンがあるので
値が見えなくても@clickでコピーさえできればOK⭕️
そのためinputでやっていますが、
urlを直接選択するような場合は
スクロールの効くdivで作成すると良いと思います🌟

divで作る場合も後述しておきます✍️

解説

readonly属性
urlを間違って編集したりしないようにします⚠️

:value
今回はユーザーが入力する必要がないので
@inputが不要、双方向バインディングが不要です🌟
値だけバインドできればOK⭕️

class="text"
input要素ではありますが、
入力不要でテキスト表示の役割のため。
コンポーネントにする場合も
InputText.vueなどの命名にし、
$attrsを使うのが良いと思います💡

双方向バインディング、
v-modelについてはこちら
https://wp.me/pc9NHC-kI

コード

) pages

<template>
  <div class="page">
    <input
      id="input"
      :value="url"
      type="text"
      readonly
      class="text"
    >
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',
    }
  },
}
</script>

<input

id="input"

:value="url"

type="text"

readonly

class="text"

</div>

</template>

export default {

data () {

return {

url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',

}

</script>

コピーボタンを作る

コピーと言えばdocument.execCommand()ですが廃止！
なのでClipboard APIと
nuxt-clipboard2を使ってみましょう🌟

document.execCommand()も
一応…最後に載せています🐥

方法1: Clipboard API

https://developers.google.com/web/updates/2018/03/clipboardapi

コード

) pages

コピー部分はこれだけ
navigator.clipboard.writeText(コピーしたい物)
めちゃくちゃ簡単ですね🤗💕

対応ブラウザの確認のため
if(navigator.clipboard)としています。

<template>
  <div class="page">
    <input
      id="input"
      :value="url"
      type="text"
      readonly
      class="text"
    >
    <button @click="copy">copy</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',
    }
  },
  methods: {
    copy () {
      if(navigator.clipboard){
        navigator.clipboard.writeText(this.url)
        console.log('コピー完了')
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<input

id="input"

:value="url"

type="text"

readonly

class="text"

</div>

</template>

export default {

data () {

return {

url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',

}

methods: {

copy () {

if(navigator.clipboard){

navigator.clipboard.writeText(this.url)

console.log('コピー完了')

return true

} else {

return false

}

</script>

方法2: nuxt-clipboard2

こちらもすごく簡単に実装できます！
実装の仕方はこちらの記事を参考にしました🌟
ここではコードのみ載せます💡
https://qiita.com/at-946/items/aea8ac9938d810feae7b

コード

) pages

コピー部分はこれだけ
this.$copyText(コピーしたい物)

<template>
  <div class="page">
    <input
      id="input"
      :value="url"
      type="text"
      readonly
      class="text"
    >
    <button @click="copy">copy</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',
    }
  },
  methods: {
    copy () {
      this.$copyText(this.url)
      console.log('コピー完了')
    },
  },
}
</script>

<input

id="input"

:value="url"

type="text"

readonly

class="text"

</div>

</template>

export default {

data () {

return {

url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',

}

methods: {

copy () {

this.$copyText(this.url)

console.log('コピー完了')

}

</script>

方法3: document.execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands

解説

document.getElementById("input")
id="input"のinputタグを指定

select()
input内のすべてのテキストを選択
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

コード

) pages

<template>
  <div class="page">
    <input
      id="input"
      :value="url"
      type="text"
      readonly
      class="text"
    >
    <button @click="copy">copy</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',
    }
  },
  methods: {
    copy () {
      let target = document.getElementById("input")
      target.select()
      document.execCommand("Copy")
      alert("コピー完了！" + target.value)
    },
  },
}
</script>

<input

id="input"

:value="url"

type="text"

readonly

class="text"

</div>

</template>

export default {

data () {

return {

url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',

}

methods: {

copy () {

let target = document.getElementById("input")

target.select()

document.execCommand("Copy")

alert("コピー完了！" + target.value)

}

</script>

divで作る場合

urlを直接選択してコピーする場合ですね🌟

コピーボタンが不要になるので
さらっと書いておきます🌱
inputと違って値が全て見えないといけません👀
overflow: scroll;にしておきましょう。

スクロールバーの部位はこちらが参考になります！
https://unformedbuilding.com/articles/learn-about-webkit-scrollbar/

コード

) pages

<template>
  <div class="text">
    <p>{{ url }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',
    }
  },
}
</script>

<style lang="scss" scoped>
  .text {
    min-width: 335px;
    border: 2px solid pink;
    overflow: scroll;
    padding: 6px 0px 6px 10px;

    &::-webkit-scrollbar {
      height: 5px;
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: pink;
      border: solid 1px #4A4A4A;
      border-radius: 2px;
    }
  }
</style>

</div>

</template>

export default {

data () {

return {

url: 'https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb',

}

</script>

.text {

min-width: 335px;

border: 2px solid pink;

overflow: scroll;

padding: 6px 0px 6px 10px;

&::-webkit-scrollbar {

height: 5px;

}

&::-webkit-scrollbar-track {

background-color: transparent;

}

&::-webkit-scrollbar-thumb {

background-color: pink;

border: solid 1px #4A4A4A;

border-radius: 2px;

}

</style>

まとめ

いかがでしたか？💡
v-modelの復習や
コピーボタンの実装が簡単ということが
分かったかと思います❣️😄

こんな記事がほしい！
などがありましたらコメントお願いします✨🙏