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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-xv

前置き

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

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

コード

index.vue

<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>

コピーボタンを作る

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

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

方法1: Clipboard API

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-xv