現在のアドレスをクリップボードにコピー

ライブラリvueクリップボード2の使用

vueクリップボード2ガイド

1.vueクリップボードのインストール

端末に以下の内容を入力し、パッケージ化します.jsonにインストールされていることを確認します.

npm install --save vue-clipboard2

2.VUEにアップロードして使用する。

main.jsにvueクリップボード2でインポートします.
Vueにインポートします.useを登録してvueで使用できます!
index.htmlにスクリプトvue.min.jsを追加します.

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard)

<script src="vue.min.js"></script>

3.実装関数

ボタンをクリックしたときに現在のアドレスをコピーする関数を実装
現在のアドレスは、window.location.hrefによってhomeLink変数に格納される

<template>
  <div id="app">
    <button type="button" @click="urlLink">Copy!</button>
  </div>
</template>

<script>
export default { 
 data() {
    return {
      homeLink: window.location.href,
    };
 },
 methods: {
    urlLink() {
      this.$copyText(this.homeLink).then(function () {
        alert("복사되었습니다.");
      });
    },
 }, 
}
</script>

振り返る

進行中の項目で使用した機能.
ライブラリを使用しているので、簡単なコードでクリップボード機能を実現できるので便利です.以前はdocument.execCommandで実現された機能を使用していましたが、推奨されません.次回はclipboard.jsで実現します.