アプリ サイト

【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


コピーボタンを作る

コピーと言えば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)としています。


方法2: nuxt-clipboard2

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

コード

) pages

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


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


divで作る場合

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

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

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

コード

) pages


まとめ

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

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

-アプリ, サイト
-,

© 2020 aLiz Nuxt