클립보드에 현재 주소 복사

라이브러리 vue-clipboard2 이용

vue-clipboard2 가이드

1. vue-clipboard 설치

터미널에 아래와 같이 입력한 후 package.json에 설치되는 것을 확인한다.

npm install --save vue-clipboard2

2. 사용하기 위해 Vue에 올린다.

main.js에 vue-clipboard2를 통해 import 시켜준다.
import 해온 것을 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를 이용해서 구현해 봐야겠다.