Vue.jsでクリップボード機能を実装する

はじめに

PCであれば、「範囲選択→ショートカットキー」で簡単に範囲コピーをする事が可能ですが、スマホの場合面倒な作業になってしまいます。
ユーザー体験向上の為、ブラウザ上でクリップボード機能を実現する目的でClipboard APIを利用したので紹介します。

記事の目的

・クリップボードボタンを押下すると対象文字列がコピーされる機能を実装する

Clipboard API

Clipboard API は Promise ベースでクリップボードのコピーやペーストが行えるAPI です。

使い方は簡単で、クリップボードにテキストを書き込む為に以下のように利用します。

navigator.clipboard.writeText("コピーしたい文字列")

Vue.jsプロジェクト内で利用してみる

<template>
    <div>
        <p>{{ text }}</p>
        <button @click=writeToClipboard(text)>コピー</button>
        <input type="text">
    </div>
</template>

<script lang="ts">
    private text = "クリップボード成功";

    private writeToClipboard(text: string): void {
        navigator.clipboard.writeText(text).catch((e) => {
            console.error(e);
        });
    }
</script>

ちなみに現在は多くのブラウザで対応されているようです。

参考

developer.mozilla.org

developer.mozilla.org