vue에서 복사하기 기능 만들기

이슈발생

vue 내에서 복사기능을 사용해야함 !!

코드 복사를 위해서 두가지 방법이 있다는것을 발견

1. document.execCommand()

<input ref="copy" type="text" :value="text" />
<button @click="handleCopy">클립보드 복사하기</button>

document.execCommand()함수를 이용하면 복사가 가능하다

input의 경우 vue에서의 경우 dom에 접근하기 위해서는 ref값을 이용을 해야한다 !!

// input을 선택하고 
copy.value.select()
// 복사를 수행
document.execCommand('copy')

document.execCommand()를 이용해서 복사를 실행했는데 어떤 이유인지는 모르겠으나 복사 실패…….

2. Vue-clipboard 라이브러리 실행

• vue 라이브러리 설치

npm install --save vue-clipboard2

• main.js에 vue-clipboard2를 통해 import 시킨다 . Vue.use에 등록해 주면 vue에서 사용 가능 하다

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

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

• index.html에 스크립트 vue.min.js를 추가

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

• 함수구현

method: {
	copy() {
	this.$copyText('카피TEXT').then(()=> {
			alert("복사 완료")
		}	
	}
}

결론

확실히 vue 라이브러리를 사용하는것이 좀더 간편하고 ! 깔끔하게 복사가 되는것을 확인했다 ! document.execCommand()는 method에서 사용했을때 execCommand 이렇게 처리가 되었다.

더이상 지원을 안하는건 아닌거같은데 왜 이렇게 나오는지 모르겠다.. 구글 검색을 더해보자

이기능은 더이상 권장이 되지 않는 기능이라고 한다 !!!!! 일부 브라우저는 여전히 이를 지원하지만 관련 웹 표준에서 이미 제거되었거나 삭제 과정에서 호환성 목적으로 유지되고 있다. 가능하면 기존 코드를 업데이트를 하라고 한다 !! 작동이 중지될 수 있다 !!!!